使用 JavaScript 修改网页的 CSS

我正在尝试创建一个chrome插件以加快阅读网络上的文章。我希望用户可以选择他想要阅读文章的速度，并且插件可以以相同的速度突出显示文章的文本（每个单词）。这可以通过网页的 JavaScript 修改 CSS 来实现，但 CSS 中的更改只有在执行完整的 JavaScript 时才可见，并且所有更改都一次反映，而不是一次一个字。我可以用不同的方式实现它吗。下面是我的代码。

背景.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 
        }*/
    }
});

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"]
}