我有一个.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完全不熟悉,如果描述中的某些内容没有意义,我很抱歉。