Question

我想构建一个Chrome扩展程序，它可以将脚本标记注入静态提供的HTML文件（不是页面本身，即不是index.html）。

我能够在主要实际页面（即index.html）上使用内容脚本在我的清单中执行此操作：

...
"content_scripts": [
  {
    "js": ["script.js"],
    "run_at": "document_start"
  }
],
...

...以及document.body.insertAdjacentHTML('afterbegin', '[SCRIPT_PATH]');中的script.js，但我想做的是在另一个用作资产的HTML文件上执行此操作，BTW正在从我的主index.html导入为Web组件。

换句话说，内容脚本是否可以访问（和修改/更改）作为源文件的静态HTML文件（主index.html除外）？

谢谢！

编辑：所以这是我的结构：

index.html内容：

<!DOCTYPE html>
<html>
<head>
  <title>Yay!</title>
  <link rel="import" href="foo.html">
</head>
<body>
  Sexy body woop!
</body>
</html>

foo.html内容：

<script src="bar.js"></script>
<!-- here I want the Chrome extension's content script to inject another script -->

Answer 1

您可以使用import元素的<link>属性访问导入的文档。

var link = document.querySelector( 'link[href="foo.html"]' )
var importedDoc = link.import

然后，您可以像处理主要文档一样操纵导入的HTML文档：

//get the bar.js script element
var script = importedDoc.querySelector( 'script[src="bar.js"]' )
//append your script after it
importedDoc.body.insertBefore( yourScript, script.nextSibling )

Chrome扩展程序可以访问并更改静态HTML资产吗？

1 个答案: