将HTML加载到页面元素中（Chrome扩展）

Question

将HTML加载到页面元素中（Chrome扩展）

javascriptjquerydomgoogle-chrome-extension

32

我想编写一个Chrome扩展程序，在某些网页的顶部放置一个栏。如果我的内容脚本像这样：

$('body').prepend('<div id="topbar"><h1>test</h1></div>');

一切看起来都很好，但我最终想要的是这样的：

$('body').prepend('<div id="topbar"></div>');
$('#topbar').load('topbar.html');

其中 topbar.html 是：

<h1>test</h1>

然而，当我将其更改为这个之后，网页被覆盖了。大部分内容消失了，只能看到一些广告。我甚至无法看到“test”标题。我已经检查过页面上是否有其他“topbar” id。出了什么问题？

- Colin

topbar.html 文件位于哪里？是在 Chrome 扩展程序中还是网页端？ - mattsven

它在Chrome扩展目录中。 - Colin

好的，.load 使用 AJAX 将文件加载到元素中，我很确定你无法通过 AJAX 加载本地 Chrome 文件。 - mattsven

2

我刚刚使用了几乎与此相同的代码。我在我的manifest.json文件中添加了“web_accessible_resources”:[...]，它完美地工作了。 - Ads

4个回答

6

虽然上述解决方案是可行的，但需要注意的一点是，您需要从事件处理程序返回 true，以便在 $.ajax 调用成功后仍然可以使用通信端口。

有关更多信息，请参见下面的链接： https://code.google.com/p/chromium/issues/detail?id=307034

- spider T

12

如果你想对别人的回答进行补充，最好在他们的回答下留言，而不是另外发表一个回答。 - ChargerIIC

5

纯JS解决方案。

在您的manifest.json文件中：

{
  "manifest_version": 3,
  # [...]
  "web_accessible_resources": [{
      "matches": ["<all_urls>"],
      "resources": ["topbar.html"]
  }]
}

在你的content.js文件中：

async function load_toolbar() {
  let newElement = new DOMParser().parseFromString('<div id="toolbar"></div>', 'text/html').body.childNodes[0];
  let toolbar_url = chrome.runtime.getURL("toolbar.html");

  document.querySelector("body").appendChild(newElement);
  document.getElementById("toolbar").innerHTML = await (await fetch(toolbar_url)).text();
}

load_toolbar();

- fguillen

1

这是最有帮助的答案。非常好用。 - Joshua Dance

2

2020年的现在，chrome.extension.onRequest已经被弃用，加载扩展时会导致错误。相反，应该使用chrome.runtime.sendMessage。对于content.js，代码现在应该是：

chrome.runtime.sendMessage({cmd: "read_file"}, function(html){
    $("#topbar").html(html);
});

对于 background.js，代码现在应该是：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.cmd == "read_file") {
        $.ajax({
            url: chrome.extension.getURL("topbar.html"),
            dataType: "html",
            success: sendResponse
        });
       return true;
    }
})

请确保在ajax之后注意添加'return true'，这个问题曾让我困扰过。

- Noah Friedman

请确保在manifest.json的web_accessible_resources中包含"topbar.html"。https://developer.chrome.com/extensions/manifest/web_accessible_resources - Satya Kalluri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- serg · Accepted Answer

扩展文件夹中文件的 URL 格式如下：

chrome-extension://<ID>/topbar.html

您可以通过运行以下代码获取此路径：

chrome.extension.getURL("topbar.html")

现在如果你尝试执行：

$('#topbar').load(chrome.extension.getURL("topbar.html"));

由于跨域策略的限制，它不允许你这样做。而背景页面没有这个限制，因此您需要在那里加载HTML并将结果传递给内容脚本：

content_script.js:

chrome.extension.sendRequest({cmd: "read_file"}, function(html){
    $("#topbar").html(html);
});

background.html:

->

background.html:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.cmd == "read_file") {
        $.ajax({
            url: chrome.extension.getURL("topbar.html"),
            dataType: "html",
            success: sendResponse
        });
    }
})

在现实世界中，你可能只会读取一次topbar.html文件，然后重复使用它。