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

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

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

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

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

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

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

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

v2版本写法：

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

v3版本写法：

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

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

参考资料：

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