javascript - 使用javascript修改网页的CSS

Question

我正在尝试创建一个 chrome 插件来快速阅读网络上的文章。我希望用户可以选择他想要阅读文章的速度，并且插件可以以相同的速度突出显示文章的文本(每个单词)。这可以通过网页的 JavaScript 修改 CSS 来实现，但只有在执行完整的 JavaScript 时才能看到 CSS 的更改，并且所有更改都会立即反射(reflect)出来，而不是一次一个字。我可以用不同的方式实现吗.below 是我的代码。

背景.js

/* Regex-pattern to check URLs against. 
   It matches URLs like: http[s]://[...]stackoverflow.com[...] */
var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?getpocket\.com/;

/* A function creator for callbacks */
function doStuffWithDOM(element) {

    alert("I received the following DOM content:\n" + element.toString()); 
}

/* When the browser-action button is clicked... */
chrome.browserAction.onClicked.addListener(function(tab) {
    /*...check the URL of the active tab against our pattern and... */
    if (urlRegex.test(tab.url)) {
        /* ...if it matches, send a message specifying a callback too */
        chrome.tabs.sendMessage(tab.id, { text: "report_back" },
                                doStuffWithDOM);
    }
});

内容.js

// Listen for messages
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    // If the received message has the expected format...
    if (msg.text === 'report_back') {
        // Call the specified callback, passing
        // the web-page's DOM content as argument
        //var outerHTML = document.querySelector('.text_body').outerHTML;
        //sendResponse(document.all[0].outerHTML);
        //var outerHTML = document.all[0].outerHTML;
        var outerHTML = document.querySelector('.text_body').outerHTML;
        var outerHTML1 = outerHTML;
        var j=0;
        var k = 0;
        var searchText = ' ';
        for(i=outerHTML.indexOf(searchText);i<outerHTML.length;i = outerHTML.indexOf(searchText,i+1))
        {
            outerHTML1 = "<mark>" + outerHTML1.substring(0,i)+ "</mark>"+ outerHTML1.substring(i+1,outerHTML1.length-1);
            for(k=0;k<500;k++)
            {
                console.log(k);
            }
            k = 0;
            document.querySelector('.text_body').outerHTML = outerHTML1;
            //sendResponse(document.querySelector('.text_body').outerHTML);
            console.log(i);
        }


        sendResponse("it works!"); 
        /*for (index = outerHTML.indexof(" ") , index1 = 0; index < outerHTML.length() ; index1 = index ,index = outerHTML.indexof(index , " "))
        {
             outerHTML = outerHTML.substring(index1,index-1) + "<span class='highlight'>" + outerHTML.substring(index1,index+text.length) + "</span>" + outerHTML.substring(index + text.length);
        inputText.outerHTML = outerHTML 
        }*/
    }

});

list .json

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },
    "content_scripts": [{
        "matches": ["*://*.getpocket.com/*"],
        "js":      ["content.js"]
    }],
    "browser_action": {
        "default_title": "Test Extension"
    },

    "permissions": ["activeTab"]
}

Answer 1

这是一个working JsFiddle .我留下了一些功能，比如使用动态文本来突出显示、处理文本大小写和时间间隔。希望你能在这些事情上努力。如果您需要其他帮助，请告诉我。

解释使用的代码。我找到所有名为 software 的文本在我的 div 中并将其替换为 <span class='highlight'>software</span>后来我有一个每秒运行一次的间隔函数(您必须根据您的用户速度更改它)并逐字突出显示文本。

$(function(){ 
  var docText = $('#docContent')[0].innerHTML;
  var modifiedText = docText.replace(/software/g, "<span class='highlight'>software</span>");  
 $('#docContent').html(modifiedText);

  setInterval(function() {
  debugger;
     $('span.highlight:not(.highlight-active):eq(0)').addClass('highlight-active');
     }, 1000); //60*1000
});

我的 Div 部分有

<div id="docContent">
      <p>
      software
    from wikipedia, the free encyclopedia
    for other uses, see software (disambiguation).
    computer software also called a program or simply software is any set of instructions that directs a computer to perform specific tasks or operations. computer software consists of computer programs, libraries and related non-executable data (such as online documentation or digital media). computer software is non-tangible, contrasted with computer hardware, which is the physical component of computers. computer hardware and software require each other and neither can be realistically used without the other.

    at the lowest level, executable code consists of machine language instructions specific to an individual processor—typically a central processing unit (cpu). a machine language consists of groups of binary values signifying processor instructions that change the state of the computer from its preceding state. for example, an instruction may change the value stored in a particular storage location in the computer—an effect that is not directly observable to the user. an instruction may also (indirectly) cause something to appear on a display of the computer system—a state change which should be visible to the user. the processor carries out the instructions in the order they are provided, unless it is instructed to "jump" to a different instruction, or interrupted.

    software written in a machine language is known as "machine code". however, in practice, software is usually written in high-level programming languages that are easier and more efficient for humans to use (closer to natural language) than machine language.[1] high-level languages are translated into machine language using a compiler or an interpreter or a combination of the two. software may also be written in a low-level assembly language, essentially, a vaguely mnemonic representation of a machine language using a natural language alphabet. assembly language is translated into machine language using an assembler.
      </p>
 </div>

以及使用的css

.highlight-active{
  background-color:yellow;
  color:green;
}