google浏览器插件开发(google浏览器 插件)

如何开发Chrome(谷歌)浏览器的插件

需要了解JS,CSS以及HTML5,然后多查阅官方开发API文档一般就可以开发插件了

google 插件开发怎样使用网页内容

首先是启动谷歌浏览器的开发者工具的方法。在浏览器右上角的选项中点击,下拉菜单选工具——开发者工具,快捷键CTRL+shift+I

打开开发者工具后,在浏览器下方出现一个调试面板。左侧是网页HTML调试查看,右侧是CSS代码调试,还有一些JS,资源的折叠起来了。

谷歌浏览器调试的好处就是,可以实现元素定位,把鼠标放在指定的元素上,就可以在浏览器的上面视图中加灰突出显示所对应的元素。

右侧的CSS代码调试是一个不错的工具,不仅可以查看对应的标签的代码,同时还可以实时更改代码的值并在浏览器上方视图中显现变化。

CSS调试中,还有盒子模型的形象视图。在右侧折叠面板中可以打开,实现对margin,padding等的定位计算。

如何编写google浏览器插件

方法如下:

1、创建一个单独的文件夹,比如说为百度贴吧开发一个插件,就叫TiebaAddion。之后在这个文件夹里创建一个名字为“manifest.json”的文件,在里面写上如下的样子。

{

"name": "TiebaAddin",

"version": "1.0",

"description": "An addin for Tieba.",

"browser_action": {"default_icon": "icon.png"},

"permissions": [http://*/*]

}

2、现在需要找一个图标,放在这个目录下,名字叫icon.png,当然,这个名字只要和上面的配置文件里default_icon的属性一致就好。

3、现在只要点击Chrome工具条的菜单按钮选择里面的工具(Tools) 扩展(Extensions)就好。菜单按钮如右图。

4、选择开发者模式,选择加载未打包的插件,然后,选择第一步中的那个文件夹即可。

5、在地址栏的右侧出现了图标,但是点击图标却什么也没做,因为我们还什么代码没有写。现在在那个目录下,建立一个html文件,并且名字为popup.html,同时在配置文件里“browser_action”下加上一条:"popup": "popup.html"。

示范:

{

"name": "TiebaAddin",

"version": "1.0",

"description": "An addin for Tieba.",

"browser_action": {"default_icon": "icon.png","popup": "popup.html"},

"permissions": [http://*/*]

}

? ? ? 此处注意,每一对大括号里的最后一项后面都没有逗号,其余的每项之间必须用逗号间隔!哪怕是browser_action这样复合的项目,在他的大括号后也要有逗号。

6、在Popup.html里写上一些html代码,比如简单的输出HelloWorld也好,这个Popup.html和普通的html文件按没有任何差别。

7、这就是基本的插件制作方法。

新手怎样开发一个谷歌浏览器的插件

Chrome 浏览器作为基于Webkit的新一代浏览器。Chrome自从正式发布以来,市场占有率逐步提高,自从公布了Chrome扩展的API以来,Chrome扩展开发更是前途似锦。一个Chrome插件小则可以解决生活中琐碎的问题,多则可以惠及千众,造福万代。而且,Google为Chrome建立了自己的Web开发市场,做得好的插件还可以为作者赢得丰厚的利益。

工具/原料

Chrome浏览器

文本编辑工具,普通的记事本也可以,不过最好是带格式整理和语法高亮的,笔者用的是Notepad++,需要的朋友可以百度一下。

步骤/方法

创建一个单独的文件夹,起个名字吧,比如说我们为百度贴吧开发一个插件,就叫TiebaAddion。之后在这个文件夹里创建一个名字为“manifest.json”的文件,在里面写上如下的样子。

{

"name": "TiebaAddin",

"version": "1.0",

"description": "An addin for Tieba.",

"browser_action": {"default_icon": "icon.png"},

"permissions": [http://*/*]

}

这里各项的意义很显然可以通过名字得之,但如果你想了解更多,请参考“Chrome扩展”文档(详见参考资料)

如果你细心看上面的配置文件,你就会知道,你现在需要找一个图标,放在这个目录下,名字叫icon.png,当然,这个名字只要和上面的配置文件里default_icon的属性一致就好。

现在,只要点击Chrome工具条的菜单按钮选择里面的工具(Tools) 扩展(Extensions)就好。菜单按钮如右图。

选择开发者模式,选择加载未打包的插件,然后,选择第一步中的那个文件夹即可。好吧,现在我们就可以启动插件了。

好了,在地址栏的右侧出现了我们的图标,但是点击图标却什么也没做,这是自然地,因为我们还什么代码没有写。现在在那个目录下,建立一个html文件,并且名字为popup.html,同时在配置文件里“browser_action”下加上一条:"popup": "popup.html"。示范:

{

"name": "TiebaAddin",

"version": "1.0",

"description": "An addin for Tieba.",

"browser_action": {"default_icon": "icon.png","popup": "popup.html"},

"permissions": [http://*/*]

}

此处注意,每一对大括号里的最后一项后面都没有逗号,其余的每项之间必须用逗号间隔!哪怕是browser_action这样复合的项目,在他的大括号后也要有逗号。

在Popup.html里写上一些html代码,比如简单的输出HelloWorld也好,这个Popup.html和普通的html文件按没有任何差别。

步骤阅读

7

这就是基本的插件制作方法,插件制作的中级教程我在一下篇相关经验会详细讲解的。

转载

怎样开发Chrome浏览器的插件

Chrome Extension 英文开发文档

权限提升后需要重新启用插件:

dodo旁批:所以一开始就要定位好自己扩展所用到的权限范围,以免权限提升时给用户带来多余的操作。

捕获页面刷新:

Chrome 扩展中文开发文档

开发实例:

1.Chrome 扩展:一键隐藏百度贴吧签名档

2. 网址二维码

3. 人人 2B 过滤器