1

I have a chrome extension written in pure JS which is basically composed of functions which append data to links on the page.

An example of the functions which basically just appends a click integer to the link element passed in from another function:

function addCounttoLinks(link, counts) {
    var clicks = counts.split(":")[1].split(",")[0].trim();
    var count = document.createTextNode((" (" + clicks + ")"));
    var dspan = document.createElement("span");
    dspan.appendChild(count);
    dspan.style.fontSize = "10px"; dspan.style.textAlign = "center";
    link.appendChild(dspan); 
}

What is the most efficient way to execute/unexecute these functions, so that I can implement a "on/off" button for the user to click which would add/remove the data appended by the extension. Is the only solution to write functions to remove the previously created elements?

4

1 回答 1

0

span在（比如说，my-nifty-extension-extra 你希望它不太可能与其他东西发生冲突）上放置一个类，然后在隐藏数据时将一个类添加到body（比如说，hide-my-nifty-extension），并在显示它时将其删除。然后使用这个样式规则：

body.hide-my-nifty-extension span.my-nifty-extension-extra {
    display: none;
}

例如，就在你之前appendChild：

dspan.className = "my-nifty-extension-extra";

接着：

function showExtraData() {
    document.body.classList.remove('hide-my-nifty-extension');
}

function hideExtraData() {
    document.body.classList.add('hide-my-nifty-extension');
}

（编写 Chrome 扩展程序的乐趣之一是你知道你有类似的东西classList。）

于 2013-06-26T05:56:37.280 回答