使用javascript修改網頁的CSS

Question

我想創建一個Chrome瀏覽器插件，以便在網上閱讀文章。我希望用戶可以選擇他想要閱讀文章的速度，插件可以用相同的速度突出顯示文章的文字（每個單詞）。這可以通過使用網頁的JavaScript修改CSS來實現，但CSS中的更改只有在執行完整的JavaScript並且所有更改都一次反映而不是一次一個單詞時纔可見。可以用不同的方式實現它。以下是我的代碼。

background.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); 
    } 
}); 

content.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 
     }*/ 
    } 

}); 

的manifest.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。我留下了一些功能，例如使用動態文本突出顯示，處理文本案例和時間間隔。希望你能處理這些事情。讓我知道你是否需要額外的幫助。

解釋使用的代碼。我在我的div中找到所有叫做software的文本，並用<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 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; 
}