Question

我正在使用Chrome扩展程序content script，该扩展程序将在特定页面上向页面注入其他内容，以便为现有网站添加功能。

我的Chrome扩展程序中包含一个HTML文件，其中包含将要添加的内容的模板。我希望我可以使用jQuery来检索HTML模板。我最初尝试了一个简单的jQuery AJAX请求，如下所示：

var url = "template.html";

$.get(url,function(data, textStatus, jqXHR){
    console.log("Got the template!");
    console.log(data);
},"html");

但是，这会导致以下错误： 请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许访问“chrome-extension：// gmjipglelhnlbakmlobgffnpceaalnnc”。

这听起来像Chrome Extensions permissions issue，相关权限似乎是[scheme]:[host]/*权限问题。我的扩展程序ID为gmjipglelhnlbakmlobgffnpceaalnnc，因此我尝试添加chrome-extension://gmjipglelhnlbakmlobgffnpceaalnnc/的权限（according to this是完全限定的Chrome扩展程序打包资源的前缀）。

这不起作用，因为Chrome告诉我权限'chrome-extension：// gmjipglelhnlbakmlobgffnpceaalnnc /'未知或网址格式错误。

稍微阅读一下，我发现在extension origin下有一个特定的工具，用于请求打包资源。这一切都很好，但我更喜欢使用统一的API来请求资源，即能够使用jQuery来下载我的模板文件，就像我一直在为常规的“vanilla”web应用程序做的那样（即，不是Chrome扩展程序。）

有没有办法配置我的Chrome扩展程序权限，以便我可以通过jQuery的AJAX工具请求“扩展源”资源？

Answer 1

找到我的答案。您必须通过web_accessible_resources在清单中明确添加单个扩展资源或与您的扩展资源匹配的模式。

完成此操作后，您可以使用chrome.extension.getURL(resourcePath)构建网址。

以下是我的清单摘录：

"web_accessible_resources" : [
    "*.html"
]

这是我用来请求我的模板文件的代码：

var url = chrome.extension.getURL("template.html");
$.get(url,function(data, textStatus, jqXHR){
    console.log("Got the template!");
    console.log(data);
},"html");

Chrome扩展程序内容脚本是否可以为html文件发出jQuery AJAX请求，该文件本身是Chrome扩展程序的一部分？

1 个答案: