idu*_*ude 5 html javascript 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 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以突出显示每个单词？
提前致谢!
小智 7
通过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);
});
});
}
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
}
}
}
| 归档时间： |
|
| 查看次数： |
2733 次 |
| 最近记录： |