chrome 扩展可以访问和更改静态 HTML 资产吗？

Question

我想构建一个 Chrome 扩展，它能够将脚本标记注入静态服务的 HTML 文件（不是页面本身，即不是 index.html ).

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

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

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

换句话说，内容脚本可以访问（和 modify/alter）静态 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

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

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 资产吗？

Can a chrome extension access and alter a static HTML asset?

html

javascript

web-component

google-chrome-extension

content-script