Question

我想知道创建Google Chrome扩展程序所需的所有组件和步骤，这些扩展程序可以从某个页面内的iframe中删除一些DOM元素。

我的研究表明，由于相同的原始政策，这是不可能通过常见的JavaScript。

从Chrome中手动删除Chrome中的代码检查中的DOM元素，但我希望自动执行此操作。

来自其他类似问题（主要是this one），Chrome扩展程序似乎应该可以执行此操作。我认为this是最相似的问题，但尚未得到回答，也不是很清楚。

老实说，我可以从这里接受它，但我认为其他人可能从这个问题和答案中受益，即使我最终回答自己。

示例HTML：

<!DOCTYPE html>
<html>
<body>
    <iframe src="iframe.htm"></iframe>
</body>
</html>

iframe.htm：

<!DOCTYPE html>
<html>
<body>
    <div id="targetDiv"></div>
</body>
</html>

最终结果应与运行（使用jQuery）相同：

$('#targetDiv').remove();

当然不起作用。

Answer 1

我完成了我想要的，所以这就是答案。

Chrome扩展程序首先需要的是清单文件manifest.json。这是一个有效的例子：

{
  "manifest_version": 2,

  "name": "iframe manipulation extension example",
  "description": "This extension allows to run scripts that manipulate cross domain IFRAME contents.",
  "version": "1.0",

  "permissions": [
    "*://target-site.com/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://target-site.com/*"
      ],
      "js": ["script.js"],
      "all_frames": true
    }
  ]
}

它有一些不言自明的值，然后是permissions和content_scripts。它基本上表示此扩展仅在访问target-site.com时有效。我们指定要运行的文件，并设置"all_frames": true，它将为页面中的每个帧运行所述文件。

您当然可以在清单中引用的文件中运行您需要的任何JavaScript。

导航至chrome://extensions/以加载已解压缩的扩展程序或将其打包。

请注意，还有其他方法可以获得运行脚本的扩展程序。这就是我最简单的方式。

Chrome扩展程序可删除iframe中的DOM元素

1 个答案: