如何更改Font Color-Chrome Extension?

时间:2015-11-28 00:43:21

标签: javascript google-chrome google-chrome-extension

如何使用chrome扩展名更改标记内文字的字体颜色:

这就是我的清单的样子:

{
 "name":"Change Font Color",
 "description":"Changes font color to red",
 "version":"1",
 "manifest_version":2,
 "content_scripts": [
    {
     "matches": ["http://www.google.com/*","https://www.google.com/*"],
     "js": ["myscript.js"]
    }
   ]
}

JavaScript文件:

    window.addEventListener("load", function() {
    var x = document.getElementsByClassName('gb_id gb_ac gb_g');
    x.style.color = 'red';
    });

我正在尝试将Google的mani网页上各个部分的字体颜色更改为红色,但我的代码不起作用。

有什么想法?

更新

我找到了解决方案。有两个问题:
1)我试图用下面的线抓住多个班级。我应该只指定一个类

    `var x = document.getElementsByClassName('gb_id gb_ac gb_g');`

2)我需要遍历课程集合!它返回一个数组:

for (var i =0,len = r.length; i<len;i++)
{
    x[i].style['color']= 'red';
}

我希望这些信息对于未来的某个人来说非常方便!

1 个答案:

答案 0 :(得分:0)

使用document.querySelectorAll

而不是document.getElementsByClassName
 var els = document.querySelectorAll('.gb_id.gb_ac.gb_g');
 for(var i = 0; i < els.length; i++) {
   els[i].style.color="red";
 }