为Google Chrome创建扩展程序

本文介绍了为Google Chrome创建扩展程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试为Google Chrome创建一个扩展程序，为搜索结果中的每个链接添加一个图像，例如WOT扩展名web of trust，它以这种方式显示图标。 基本上当用户搜索某些内容并显示结果时，图标将显示在每个链接的结尾或开头。 任何解释或者非常感谢您对这个主题的了解，以帮助我朝着正确的方向前进。 这就是我正在努力的尝试而没有成功。

Manifest.Json { manifest_version： 2 ， name： Test_Extension， description： 测试， version： 1.0， content_scripts：[ { 匹配：[ *：//www.google.ca/*]， js ：[ trial.js] } ] ， icons：{ icon： icon.png} }

Javascript文件（Trial.js）

var imgURL = custom_icon.src = chrome.extension.getURL（icon.png）; document.getElementById（< h3 class = r > ）。src = imgURL;

我认为问题出在trial.js getElementbyID语句中，但我不确定，因为我是扩展创建的新手。

解决方案

这不是HTML元素的正确ID。 要选择类似于r的h3标记，这似乎是您要执行的操作，您应该使用document.getElementsByTagName （）并遍历结果以找到具有类r或document.getElementsByClassName（）的结果，并循环查找标签名为h3的那个。 一个更简单有效的解决方案是将jquery添加到您的内容脚本中，如：

content_scripts：[ { 匹配：[ *：//www.google.ca/*]， js：[ jquery.js， trial.js] }

然后你可以像这样设置元素的src属性：

（' h3 .r'）。attr（' src'，imgURL）;

I am trying to create a extension for google chrome to add a image for each link in a search result something like WOT extension "web of trust" which shows an icon in this manner. Basically when the user searches for something and the results are displayed the icon will be on the end or beginning of each link. Any explanation or knowledge on this topic is greatly appreciated to help set me off in the right direction. This is what i am trying without success.

Manifest.Json { "manifest_version": 2, "name": "Test_Extension", "description": "Test", "version": "1.0", "content_scripts": [ { "matches": ["*://www.google.ca/*"], "js":["trial.js"] } ], "icons": {"icon": "icon.png"} }

Javascript File (Trial.js)

var imgURL = custom_icon.src = chrome.extension.getURL("icon.png"); document.getElementById("<h3 class="r">").src = imgURL;

I believe the problem is with the trial.js getElementbyID statement but im not sure as I am new to extension creation.

解决方案

That is not a proper ID for an HTML element. To select an h3 tag with the class "r" which seems to be what you are trying to do you should use document.getElementsByTagName() and loop through the results to find the one with the class "r", or document.getElementsByClassName() and loop through to find the one with the tag name "h3". A much simpler and efficient solution would be to add jquery to your content scripts like:

"content_scripts": [ { "matches": ["*://www.google.ca/*"], "js":["jquery.js", "trial.js"] }

Then you can set the "src" attribute of your element like this:

('h3.r').attr('src', imgURL);