Javascript 突出显示Chrome扩展中的所有单词_Javascript_Html_Google Chrome_Google Chrome Extension

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

javascript html google-chrome google-chrome-extension

Javascript 突出显示Chrome扩展中的所有单词,javascript,html,google-chrome,google-chrome-extension,Javascript,Html,Google Chrome,Google Chrome Extension,我是一个尝试创建chrome扩展的初学者。在这个扩展中，我希望有一个popup.html文件，上面有“highlight”按钮。如果用户单击“突出显示”，则应突出显示页面中的所有单词显示 "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "tabs", "activeTab" ] Popup.html <!DOCTYPE htm

我是一个尝试创建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>

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

提前谢谢

您不能从

弹出窗口

访问DOM，但可以使用

内容脚本

访问DOM。看看是什么解释了

内容脚本

和

背景脚本

之间的区别弹出脚本具有与后台脚本相同的权限/权限。

要添加内容脚本，请将其添加到您的

manifest.json

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

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

通过Chrome扩展突出显示页面上的文本（或在页面上执行任何操作）必须通过。但是，当按钮在弹出窗口中单击时，弹出窗口必须与内容脚本对话，告诉它突出显示页面。这就是所谓的

您的

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);
    });
  });
}

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
    }
  }
}

content\u script.js

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

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

阅读有关内容脚本和消息传递的Chrome扩展文档（链接在上面），以获得更完整的解释

实际上，在选择页面时高亮显示页面上的文本（如单击并拖动文本进行复制和粘贴）不能在文本区域或输入字段之外以编程方式完成。但是，可以使用样式来更改文本的背景色。为了仅高亮显示文本，需要使用高亮显示样式将每个文本节点包装在一个跨度中。这是大量的DOM操作，将完全破坏原始页面。你应该考虑这是否真的对你的扩展是必要的和有用的。也就是说，它看起来像这样：

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);
    });
  });
}

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
    }
  }
}

函数高亮文本（元素）{
var节点=element.childNodes；
对于（变量i=0，l=nodes.length；i0）{
highlightText（nodes[i]）；//不是文本节点或叶，所以请检查它的子节点
}
}
}

，问题在哪里？如何访问DOM以突出显示每个单词？添加一个class=highlighted并使用css对此进行自定义。我没有访问DOM的权限来执行此操作。我想知道如何使用扩展访问DOM。