如何从我的网站的 Chrome 扩展加载文件答案

【问题标题】：How do I load a file from Chrome extensions for my website如何从我的网站的 Chrome 扩展加载文件
【发布时间】：2016-03-29 19:27:52
【问题描述】：

下面是我的manifest.josn

{
  "manifest_version": 2,

  "name": "speed booster",
  "description": "This extension will Boost Your page speed",
  "version": "1.0",

  "browser_action": {
   "default_icon": "ajax-loader.gif",
   "default_popup": "style.css"
  },
  "permissions": [
   "activeTab"
   ]
}

打包后我的扩展gif, css文件被打包并安装在Chrome中

现在如何为我的网站托管网站使用 style.css 文件，例如本地托管的 CDN？

我的 chrome 扩展名是 ex 所以我在 html 上使用了这个

<link href="chrome-extension://ex/bootstrap.css" rel='stylesheet' type='text/css' media="all" />

但不起作用

【问题讨论】：

标签： html css google-chrome google-chrome-extension

【解决方案1】：

您需要在扩展清单中以web_accessible_resources 的形式列出应在网页中访问的所有资源。见docs for Web Accessible Resources。

一旦你这样做了，正如文档解释的那样，你的资源应该可以使用 chrome-extension://[PACKAGE ID]/[PATH] 获得。例如：

<link href="chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/bootstrap.css" rel='stylesheet' type='text/css' media="all" />

您可以使用chrome.extension.getURL 在您的扩展程序中生成此完整 URL。例如：

console.log(chrome.extension.getURL('bootstrap.css'))

【讨论】：