Question

我正在尝试编写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>

但是，当我将其更改为此时，网页会被破坏。大多数内容都消失了，我最终看到了一些广告。我甚至看不到'测试'标题。我已经检查过以确保页面上没有其他“topbar”ID。怎么了？

Answer 1

extenion文件夹中的文件的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 ：

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一次，然后重复使用它。

Answer 2

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

请参阅以下内容以获取更多信息。 https://code.google.com/p/chromium/issues/detail?id=307034

Answer 3

仅供参考，现在是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”，这使我绊倒了

Answer 4

纯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();

将html加载到页面元素（chrome扩展名）

4 个答案: