Question

我正在开发一个Chrome扩展程序，它会在页面中插入一小段HTML代码。扩展名基本上只是一个插入HTML的内容脚本。

现在有些HTML非常庞大，因此在JavaScript中从头开始构建它们是一种选择，但不是首选。在我的内容中使用字符串也是一种选择，但我认为它会变得混乱。

最好的方式IMO的意见是拥有一个包含HTML块的单独文件，并让我的内容脚本根据用户操作选择其中一个块。我的问题是，如果chrome扩展具有这样的功能。

Answer 1

您可以将HTML存储在单独的文件中，然后使用ajax从这些文件中读取数据。您还可以在一个文件中存储多个HTML块，通过ajax读取文件，然后使用正则表达式提取所需的块。

Answer 2

您可以将它们存储在后台页面中，并将消息从内容脚本传递到后台页面，以获取相关的html块并通过回调函数将其传回。

在内容脚本中

function grabHTML(blockId) {
  chrome.runtime.sendMessage({'get-html': blockId },insertHTML);
}
function insertHTML (blockId,HTML) { 
   /* your insertion logic goes here */ 
}

在background.js

中

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request['get-html']) {
     var HTMLel = document.getElementById(request['get-html']);
     if (HTMLel) {
       sendResponse(request['get-html'],HTMLel.innerHTML);
     }
  }
});

并在你的backgound.html

<html>
  <head><script src="background.js"></script></head>
  <body>
    <div id="block-1"> ... </div>
    <div id="block-2"> ... </div>

    <div id="block-n"> ... </div>
 </body>

在哪里存储Chrome扩展程序的HTML代码段

2 个答案: