javascript - Chrome 扩展内容脚本是否可以对本身是 Chrome 扩展一部分的 html 文件发出 jQuery AJAX 请求？

Question

我正在开发 Chrome 扩展 content script这将在特定页面上将其他内容注入(inject)页面，以向现有网站添加功能。

我的 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” header 。因此不允许访问来源“chrome-extension://gmjipglelhnlbakmlobgffnpceaalnnc”。

这听起来像 Chrome Extensions permissions issue ，相关权限好像是[scheme]:[host]/*权限问题。我的扩展 ID 是 gmjipglelhnlbakmlobgffnpceaalnnc，所以我尝试为 chrome-extension://gmjipglelhnlbakmlogffnpceaalnnc/ 添加权限(according to this 是完全合格的 Chrome 扩展打包资源的前缀) .

这没有用，因为 Chrome 告诉我权限“chrome-extension://gmjipglelhnlbakmlobgffnpceaalnnc/”未知或 URL 模式格式错误。

多读一点，我发现有一个特定的设施，在 extension origin 下描述。 , 请求打包资源。这一切都很好，但我更愿意使用统一的 API 来请求资源，即能够使用 jQuery 来下拉我的模板文件，就像我一直在为常规的“ Vanilla ”网络应用程序所做的那样(即，不是 Chrome 扩展)。

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

Answer 1

找到我的答案。您必须通过 web_accessible_resources 在 list 中显式添加单独的扩展资源或与您的扩展资源匹配的模式。 .

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

这是我的 list 的摘录:

"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");