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

时间:2016-10-26 13:19:56

标签: javascript html google-chrome-extension web-component content-script

我想构建一个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 -->

1 个答案:

答案 0 :(得分: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 )