Opera插件,更改网址文字颜色

时间:2018-06-10 20:20:27

标签: css google-chrome-extension javascript-injection opera-extension

我有一个.html,其中包含:

<article class="<article  ">
<div class="post">
    <p>
        <span class="class22">
            <span class="class33">
                <a class="class44" href="/whatever">TextToColor</a>
            </span>
        </span>
    </p>
</div>

我的manifest.json看起来像:

{
"manifest_version": 2,

"name": "Opera Extension",
"description": "description",
"version": "1.0"

, "background": {
    "scripts": ["background.js"]
}

, "permissions": [
  "tabs", "activeTab", "*://*/*", "http://*/*", "https://*/*", "file:///*/*"
]

, "web_accessible_resources": [
    "fix.css"
]

, "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "all_frames": true
}]

}

Content.js

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.text === 'getNames') {
    var shouldBeColored = [];
    var arrayWithNames = document.getElementsByClassName("class44");
            for(var i=0; i<arrayWithNames.length; i++) {
                shouldBeColored[i] = arrayWithNames[i].innerHTML;

                if(shouldBeColored[i] == 'TextToColor') {
                    div = document.createElement( 'div' );
                    div.textContent = 'Upper text Should be red';
                    div.style['background-color'] = 'red';
                    arrayWithNames[i].appendChild( div );
                }
            }
    sendResponse(shouldBeColored);  
    return true;
}

});

最后是background.js:

chrome.tabs.onUpdated.addListener( 
function (tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete' && tab.active) {
        chrome.tabs.sendMessage(tab.id, {text: 'getNames'}, gotNames);
    }
})
function gotNames(arrayOfNames) {
var shouldBeColored = ['TextToColor', 'TextToColor2'];

if(arrayOfNames){
    for(var i=0; i<arrayOfNames.length; i++) {
        if(shouldBeColored.includes(arrayOfNames[i])) {
            alert(arrayOfNames[i]);
        }
    }
}}

目前我可以用它来显示一个警告,其中包含页面中找到的名称以及我正在尝试设置颜色的警告。我的问题是:如何设置一个特定的颜色,在屏幕上直观地显示这些元素。 任何操纵都被接受,包括css / js注射,任何东西。我对js和css完全不熟悉,如果描述中的某些内容没有意义,我很抱歉。

0 个答案:

没有答案