javascript - Chrome 扩展 : Not allowed to load local resource

标签 javascript google-chrome google-chrome-extension

我正在创建一个 chrome 扩展来修改网站,但我在加载网络字体时遇到了问题。

在我的 webpack 构建之后,我生成了一个 dist 文件夹。在此文件夹中,我有一个包含以下内容的 main.css:

@font-face {
  font-family: 'FontAwesome';
  src: url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.eot);
  src: url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.eot?#iefix&v=4.6.3) format('embedded-opentype'), url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.woff2) format('woff2'), url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.woff) format('woff'), url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.ttf) format('truetype'), url(chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.svg#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

这是我的 webpack publicPath:

chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle

所有文件都在 dist 文件夹中。

这是我的相关 list 配置:

"web_accessible_resources": [
    "fontawesome-webfont.eot",
    "fontawesome-webfont.svg",
    "fontawesome-webfont.ttf",
    "fontawesome-webfont.woff",
    "fontawesome-webfont.woff2"
  ],

PS:我已经尝试了 web_accessible_resources 部分的一切,包括*.[format]*.* 等。

这是我得到的错误:

Not allowed to load local resource: chrome://extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.woff2

截图:

https://i.imgur.com/aZ9lC2h.png

这是我设置为扩展根目录的dist文件夹:

https://i.imgur.com/w7TOY4M.png

我可能做错了什么?

最佳答案

正确的方案是chrome-extension://
另见 i18n API JS/CSS 文件中允许的常量列表:

The special message @@extension_id can be used in the CSS and JavaScript files, whether or not the extension or app is localized. This message doesn't work in manifest files.

@font-face {
  font-family: 'FontAwesome';
  src: url(chrome-extension://__MSG_@@extension_id__/fontawesome-webfont.eot);
  /* ............. */
}

关于javascript - Chrome 扩展 : Not allowed to load local resource,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40023814/

相关文章:

javascript - 如何获取文本区域内的文本宽度? (javascript/jquery)

javascript - MutationObservers - 未检测到添加的某些节点

javascript - 如何使用输入字段作为目的地的查询参数?

html - 我的 Chrome 扩展程序中的 "Unknown error"

javascript - 如何在 Chrome 本地存储中存储 Set 对象

javascript - 我可以使用 .scrollTop 监听 div 中的滚动吗(无 jQuery)

javascript - 为什么 webpack 在生产模式下会忽略 chunk?

javascript - 使用 $.ajax 函数获取特定的 id

json - 谷歌浏览器——谷歌搜索json下载

javascript - 使用 JavaScript 一次打开 25 个以上的选项卡