Chrome extension报:chrome-extension://invalid/错误,解决方法

原创 野人  2021-12-10 21:26  阅读 152 次
电费/话费9折起

是啊,我用在捣鼓Chrome extension(谷歌浏览器扩展插件),只要一折腾起来,就是“一发不可收拾”的状态,不知是好,是坏啊。

当然那个查询网站备案的插件是做完了,只不过现在捣鼓的是很早之前的一个小念头,就是也想做个跟Vue.js devtools/React Developer Tools这样的工具。

当然最喜欢的是里面的那个审查元素,今天大概是搞懂了里面工作原理,但是也遇到了一些小问题,正好遇到了就给大家说下。

首先,为什么会遇到这个问题呢,是因为扩展插件中需要引用到插件中的文件(这也是要实现审查元素中的主要功能之一,通过content_scripts来注入这个文件)。

代码是生效了,可以100%的肯定是没有错的,因为我是直接抄现成的代码,但是引入那个资源的时候,就报了个chrome-extension://invalid/这样的错误,我也是很不理解,一度以为是不是路径的问题,但是我直接访问这个路径都是正常的。

反正就是折腾,乱试,哦吼,出了问题,也大概明白了,原来在插件的manifest.json文件中有个叫web_accessible_resources字段就是拿来干这活的,就是告知Chrome,我要调用插件里面的这个内容,你给我放行,然后就objk了。

当然了,这步也发生了个小插曲,就是我看了别人的manifest.json文件中的web_accessible_resources字段写法(版本的问题),有这样的

v2版本写法:

{
  ...,
  "web_accessible_resources": ["你的文件名"],
  ...
}

v3版本写法:

{
  ...,
  "web_accessible_resources": [
    {
      "resources": ["你的文件名"],
      "matches": ["<all_urls>"]
    }
  ]
  ...
}

所以,说到底,大伙们,多会点英语好啊,直接看官方的英文文档,直接就没有这乱七八糟的事情了。

参考资料:

https://www.wangshenwei.com/writing-a-chrome-devtools-extension/

本文地址:https://www.yerenwz.com/5336.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论