Question

我是初学者，正在尝试创建Chrome扩展程序。在这个扩展中，我想要一个popup.html文件，其上有“highlight”按钮。如果用户单击突出显示，则应突出显示页面中的所有单词。

清单

"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html" 
},
"permissions": [
  "tabs", "activeTab"
]

Popup.html

<!DOCTYPE html> 
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <button id="highlight">Highlight</button>
  </body>
</html>

popup.js

window.onload = function(){
  document.getElementById('highlight').onclick = highLight;
  function = highLight(){
   //How can I make all the text  highlighted
 }
};

如何访问DOM以突出显示每个单词？

提前致谢！

Answer 1

通过Chrome扩展程序突出显示页面上的文字（或在页面上执行任何操作）必须通过Content Script完成。但是，弹出窗口必须与内容脚本通信，以便在弹出窗口中单击按钮时突出显示该页面。这称为Message Passing。

您的popup.js应该是这样的：

document.getElementById('highlight').addEventListener('click', sendHighlightMessage, false);

function sendHighlightMessage() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {highlight: true}, function(response) {
      console.log(response);
    });
  });
}

content_script.js是DOM操作实际发生的地方。它应该从您的弹出窗口中侦听消息并适当地突出显示该页面。它应包含以下内容：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.highlight === true) {
    highlightText(document.body);
    sendResponse({messageStatus: "received"});
  }
});

阅读有关内容脚本和消息传递的Chrome扩展程序文档（上面已链接），以便更详细地了解此处发生的情况。

实际上，在选择文本时突出显示页面上的文本（如点击并拖动文本进行复制和粘贴）无法在textarea或输入字段外以编程方式完成。但是，您可以使用样式来更改文本的背景颜色。为了突出显示文本，您需要使用突出显示样式将每个文本节点包装在跨度中。这是很多DOM操作，会彻底破坏原始页面。您应该考虑这对您的扩展是否真的有用和有用。也就是说，它看起来像这样：

function highlightText(element) {
  var nodes = element.childNodes;
  for (var i = 0, l = nodes.length; i < l; i++) {
    if (nodes[i].nodeType === 3)  // Node Type 3 is a text node
      var text = nodes[i].innerHTML;
      nodes[i].innerHTML = "<span style='background-color:#FFEA0'>" + text + "</span>";
    }
    else if (nodes[i].childNodes.length > 0) {
      highlightText(nodes[i]);  // Not a text node or leaf, so check it's children
    }
  }
}

Answer 2

您无法从popup访问DOM，但可以使用content script访问DOM。请查看this question，其中解释了content script和background script之间的区别。 弹出脚本具有与后台脚本相同的权限/权限。

要添加内容脚本，请将其添加到manifest.json

"content_scripts": [
  {
    "matches": ["http://*/*"], 
    "js": ["temp.js"]
  }
]

然后如评论中所述，使用一些jQuery代码突出显示单词。

突出显示Chrome扩展程序中的所有单词

2 个答案: