Chrome扩展程序 - 远程页面注入

Question

我正在开发Google Chrome扩展程序。

我需要做的是：

• 阅读特定div的内容，
• 从远程网站下载内容。
• 用下载的数据替换当前div内容。

我被告知chrome阻止了一些类似的交互，但有什么方法可以让这种情况发生？ 注入的JavaScript无法访问远程网站， 内容脚本无法修改网页正文 我该怎么办？

Answer 1

有可能。基本理念是：

CS =内容脚本，在清单中定义。 FS =注入脚本 - 单独的脚本文件。

1. 将脚本注入网页（FS）。这种注射应该在CS中进行。 FS可以完全访问DOM并可以操作它。
2. 在CS中使用window.addEventListener("message", function(){});。在FS中使用window.postMessage({foo: "mydata"}, "*")，反之亦然。因此，您可以从CS＆lt; =＆gt;发布任何数据。 FS。将外部数据加载到CS中并将其发送到FS。

我已经使用这种技术构建了一些扩展程序并且效果很好。

示例：

内容-的script.js

var el = document.createElement('script');
el.setAttribute('type', 'text/javascript');
el.setAttribute('src', "frontend-script.js");
document.head.appendChild(el);

window.addEventListener("message", function (event) {
    console.log(event);
}, false);

<强>前端-的script.js

window.postMessage({
    "foo": "data-from-frontend-script"
}, "*");