Javascript chrome扩展能否访问和更改静态HTML资产？_Javascript_Html_Google Chrome Extension_Web Component_Content Script

Javascript chrome扩展能否访问和更改静态HTML资产？

javascript html google-chrome-extension

Javascript chrome扩展能否访问和更改静态HTML资产？,javascript,html,google-chrome-extension,web-component,content-script,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（'afterbe

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

我可以在主实际页面（即，

index.html

）上使用包含以下内容的内容脚本执行此操作：

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

…和

document.body.insertAdjacentHTML（'afterbegin'，'[SCRIPT_PATH]'）

在

script.js

中，但我想做的是在另一个用作资产的HTML文件上执行此操作，顺便说一句，它是作为Web组件从我的主

index.HTML

导入的

换句话说，内容脚本可以访问（和修改/更改）作为源文件的静态HTML文件（除了main

index.HTML

）吗

谢谢

编辑：以下是我的结构：

index.html内容：

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

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


耶！
性感的身体喔！

foo.html内容：

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

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

您可以使用

元素的

import

属性访问导入的文档

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

然后，您可以像处理主HTML文档一样处理导入的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 )