Question

我有一个chrome扩展程序，我希望能够在右键单击时突出显示文本。现在，我可以让我的按钮显示在右键单击选项栏上（通过contextMenu＆＃39; s），但我不能为我的生活找出如何更改bg颜色的文字。有什么想法吗？

//This block is not working - I want to change selected text bg color
function radioOnClick(info, tab) {
    elements = document.getElementsByClassName("author");
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].innerText == info.selectionText) {
            elements[i].style.backgroundColor="red";    
        } else {
            elements[i].style.backgroundColor="";
        }
    }
}

//This block works properly in showing the options
var radio1 = chrome.contextMenus.create({"title": "Sending", "contexts":["selection"], "type": "radio", "onclick":radioOnClick});
var radio2 = chrome.contextMenus.create({"title": "Remove them", "contexts":["selection"], "type": "radio", "onclick":radioOnClick});

Answer 1

我们假设有文字＆＃34; qweSELasd＆＃34;和SEL是您希望以不同背景突出显示的选定部分。您需要通过调用splitText函数两次将文本节点拆分为三个部分（＆＃34; qwe＆＃34;，＆＃34; SEL＆＃34;和＆＃34; asd＆＃34;）第二个（＆＃34; SEL＆＃34;）节点的背景。但是你不能改变文本节点的背景，只能改变元素，所以简化代码：

＆＃13;

let s = document.getElementsByTagName('div')[0]
let second = s.firstChild.splitText(3)
second.splitText(3)
console.log(s, second)
let spn = document.createElement('span')
spn.appendChild(second.cloneNode())
second.parentNode.replaceChild(spn, second)
spn.style.background = 'red'

＆＃13;

<div>qweSELasd</div>

＆＃13;

Chrome扩展程序在rick点击时突出显示文字

1 个答案: