[英]Highlighting Text on a Page Using Javascript
我正在開發一個 Google Chrome 擴展程序,它將突出顯示列表中的某些單詞。 但是,我一直無法突出顯示這些詞。 我目前僅使用一個詞進行測試,但無濟於事。 if ("undefined" != typeof localStorage)
在 background.js 文件中,我的代碼永遠不會過去。 它只是跳過它下面的整個代碼部分。
彈出窗口.js
document.addEventListener("DOMContentLoaded", function() {
loadKeywords();
document.getElementById("buttonScan").addEventListener("click", function() {
scanForWords();
chrome.runtime.sendMessage({
"message": "getWords",
"remove": true
});
});
});
常見的.js
function loadKeywords() {
if ("undefined" != typeof localStorage) {
localStorage.setItem("keywords", "washington");
localStorage.setItem("foreground", "lightgrey");
localStorage.setItem("background", "#ffff00");
localStorage.setItem("numOfWords", true);
}
function scanForWords() {
if ("undefined" != typeof localStorage) {
localStorage.setItem("keywords", "washington");
localStorage.setItem("foreground", "lightgrey");
localStorage.setItem("background", "#ffff00");
localStorage.setItem("numOfWords", true);
}
}
背景.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if ("getWords" == request.message) {
if ("undefined" != typeof localStorage) {
chrome.tabs.query({
"active": true,
"currentWindow": true
},
function(tabs) {
if ("undefined" != typeof tabs[0].id && tabs[0].id) {
var wordCount = localStorage.getItem("wordCount");
wordCount = "true" == showOccurrences || null == showOccurrences;
chrome.tabs.sendMessage(tabs[0].id, {
"message": "returnWords",
"remove": request.remove,
"keywords": localStorage.getItem("keywords"),
"foreground": localStorage.getItem("foreground") || "red",
"background": localStorage.getItem("background") || "#lightblue",
"showOccurrences": showOccurrences
});
}
}
);
}
}
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if ("numOfWords" == request.message) {
var wordCount = localStorage.getItem("numOfWords");
wordCount = "true" == wordCount || null == wordCount;
chrome.browserAction.setBadgeText({
"text": wordCount && request.occurrences ? String(request.occurrences) : "",
"tabId": sender.tab.id
});
}
});
內容.js
function keywordsHighlighter(options, remove) {
var occurrences = 0;
// Based on "highlight: JavaScript text higlighting jQuery plugin" by Johann Burkard.
// http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
// MIT license.
function highlight(node, pos, keyword, options) {
var span = document.createElement("span");
span.className = "highlighted";
span.style.color = options.foreground;
span.style.backgroundColor = options.background;
var highlighted = node.splitText(pos);
/*var afterHighlighted = */highlighted.splitText(keyword.length);
var highlightedClone = highlighted.cloneNode(true);
span.appendChild(highlightedClone);
highlighted.parentNode.replaceChild(span, highlighted);
occurrences++;
}
function addHighlights(node, keywords, options) {
var skip = 0;
var i;
if (3 == node.nodeType) {
for (i = 0; i < keywords.length; i++) {
var keyword = keywords[i].toLowerCase();
var pos = node.data.toLowerCase().indexOf(keyword);
if (0 <= pos) {
highlight(node, pos, keyword, options);
skip = 1;
}
}
}
else if (1 == node.nodeType && !/(script|style|textarea)/i.test(node.tagName) && node.childNodes) {
for (i = 0; i < node.childNodes.length; i++) {
i += addHighlights(node.childNodes[i], keywords, options);
}
}
return skip;
}
function removeHighlights(node) {
var span;
while (span = node.querySelector("span.highlighted")) {
span.outerHTML = span.innerHTML;
}
occurrences = 0;
}
if (remove) {
removeHighlights(document.body);
}
var keywords = options.keywords.split(",");
delete options.keywords;
addHighlights(document.body, keywords, options);
chrome.runtime.sendMessage({
"message": "numOfWords",
"occurrences": occurrences
});
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if ("returnWords" == request.message) {
if ("undefined" != typeof request.keywords && request.keywords) {
keywordsHighlighter({
"keywords": request.keywords,
"foreground": request.foreground,
"background": request.background
},
request.remove
);
}
}
});
chrome.runtime.sendMessage({
"message": "getWords",
"remove": false
});
任何在正確方向上的幫助都非常感謝。 在過去的一個小時里,我一直在用頭撞牆,試圖弄清楚為什么它不會前進。
我不知道 localStorage 是否在您的代碼中的其他地方定義,但如果沒有,您需要通過chrome.
訪問它chrome.
在清單中請求它之后:
{
"name": "My extension",
...
"permissions": [
"storage"
],
...
}
進而:
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
chrome.storage.local.get(['key'], function(result) {
console.log('Value currently is ' + result.key);
});
參考:https ://developer.chrome.com/docs/extensions/reference/storage/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.