用于 chrome 扩展协议的 XMLHttpRequest

Question

我正在使用背景页面，我需要将一些代码注入到当前选项卡内容中。

所以我执行以下操作：

• 定义 browser_action
• 定义侦听器，如下所示 chrome.browserAction.onClicked.addListener
• 调用由 content_scripts 通过 chrome.tabs.executeScript 加载的脚本

并且从页面内容我需要从扩展文件夹中加载 html 资源。

但使用此 XMLHttpRequest 会出现错误 Cross origin requests are onlysupported for HTTP

由 XMLHttpRequest 处理，错误 NETWORK_ERR: XMLHttpRequest Exception 101

那么我应该如何解决它呢？

注意：地址类似于 chrome-extension://someextensionid/file.html

Answer 1

使用以下方法解决：

btoa(loadXHR(chrome.extension.getURL('file.html')))

其中

• btoa = string to base64
• loadXHR = synchronous xmlhttprequest
• chrome.extension.getURL = 解析扩展文件夹中的地址

这是在background_page中完成的，并传递到前台的脚本

chrome.tabs.executeScript

，在前台，脚本将字符串转换为html字符串和dom对象

var div = document.createElement('div');
div.innerHTML = atob(tbr);
document.body.appendChild(div);

其中

• document.createElement = 创建新的 "" 元素
• innerHTML = div 元素的 HTML 值，因此设置它将创建 DOM 可解析内容
• atob = base64 字符串到解码版本
• document.appendChild = 将带有 HTML 内容的 div 附加到 body 元素

Answer 2

而不是：

btoa(loadXHR(chrome.extension.getURL('file.html')))

您应该能够只使用：

loadXHR('file.html')

因为 XMLHttpRequest 理解相对路径（根目录是您的扩展文件夹）。