一个简单的chrome拓展程序开发
2016-11-17 22:57
330 查看
最近突然觉得有些常用的功能可以写成浏览器插件,就不用把代码放到console控制台运行了。只要点击插件图标就可以自动运行。会方便很多。就去查了下chrome插件开发教程。本质上讲,chrome插件就是以一些特殊的方式运行一些特定的html,css,JavaScript代码,前端同学们学起来还是很容易的。
比较好的中文的参考资料:
1.360翻译的文档:http://open.chrome.360.cn/extension_dev/overview.html
2.Chrome扩展及应用开发:http://www.ituring.com.cn/minibook/950
我们做一个简单的插件:实现点击插件图标可以给页面上所有的a标签加上一个target="_blank",让点所有链接都在新页面打开。
我们开发的应用这样使用:
1.建立一个文件夹。a chrome plugin。
2.新建配置文件 manifest.json。前端同学们对于这样的配置文件一定不陌生。
里同包含了版本号,插件名称,默认页面,content_scripts,permissions等基本信息。
这个文件能将我们插件中的的js,css,JavaScript文件组织起来。
具体每个参数的含义见文档:http://open.chrome.360.cn/extension_dev/manifest.html
代码:
3.建立文件。popup.html。
对应配置文件中的 "default_popup": "popup.html"。
点图标的时候我们会加载运行这个html,运行这个html引入的js。
这是一个普通的html页面。里面可以写css。也可以加载JavaScript文件。也可以给里面的节点添加事件什么的。
不过这个文件以及加载的js无法访问当前我们打开的标签页中的dom节点。
代码:
这里只用来加载一个js。
4.popup.js。 popup.html引入的js。这里我们用户它的做的事是向content_scripts中发送一个消息。相当于发一个命令。告诉content script,去办事吧。content_scripts的内容在后面,看完再回过来看一次这里。
chrome.tabs.getSelected()这个函数能获取到当前标签的信息对象并传递给回调函数。
获取到tabId就是tab.id。可以自己console.log(tab)出来看一下。文章后面有对应调试控制台的打开方式。tab相关的接口可以查看:http://open.chrome.360.cn/extension_dev/tabs.html 很多接口都要用到这个参数:tabId ( integer ),其实就是用这个接口拿到tabId。
chrome.tabs.sendRequest()这个函数是向某个标签的content_script中发送一个消息。也需要tabId这个参数。chrome插件之间的通信接口可查看 :http://open.chrome.360.cn/extension_dev/messaging.html
5.back.js。也是我们这个插件中的content script。
这个文件是我们插入到当前标签页中运行的代码。它可以访问标签页面中的dom节点。
我们这里用它来是监听消息,消息来了就运行设置标签的函数。操作标签页中的dom节点。
对应配置文件中content_scripts下的back.js。
这个参数中的内容会被加载到当前打开的网页中,可以访问当前标签页的节点。
所以,我们对页面的操作往往会写在这个脚本里。有需要的话甚至可以加载个jQuery到里面。
但是这里的JavaScript与网页上原本的JavaScript不是一个环境下运行。具体区别可以自己去看开发文档。http://open.chrome.360.cn/extension_dev/content_scripts.html
代码:
可能比较要注意的一点是popup.html与content_script之间的通信。
popup.html向标签页中的content_script发送消息。
content_script接收到消息,执行操作。
6.调试方式:
popup.html加载的js调试。
右键点击插件图标,选择审查弹出内容。(或者在弹出框里右键点击检查。)会弹出一个控制台。
点source可以看到我们的html和js资源。
content_script的调试:
打开页面控制台,点sources,然后点Contents scripts,可以看到浏览器插件会作用到页面的代码。
注意每次修改了代码要重新加载插件。
这样我们就完成了一个简单的chrome插件。
github:https://github.com/liusaint/JavaScript-record/tree/master/a%20chorme%20plugin
转载请注明出处:http://blog.csdn.net/liusaint1992/article/details/53207667
比较好的中文的参考资料:
1.360翻译的文档:http://open.chrome.360.cn/extension_dev/overview.html
2.Chrome扩展及应用开发:http://www.ituring.com.cn/minibook/950
我们做一个简单的插件:实现点击插件图标可以给页面上所有的a标签加上一个target="_blank",让点所有链接都在新页面打开。
我们开发的应用这样使用:
1.建立一个文件夹。a chrome plugin。
2.新建配置文件 manifest.json。前端同学们对于这样的配置文件一定不陌生。
里同包含了版本号,插件名称,默认页面,content_scripts,permissions等基本信息。
这个文件能将我们插件中的的js,css,JavaScript文件组织起来。
具体每个参数的含义见文档:http://open.chrome.360.cn/extension_dev/manifest.html
代码:
{ "manifest_version": 2, "name": "A", "version": "1.0", "description": "新标签打开链接", "browser_action": { "default_popup": "popup.html" }, "content_scripts":[ { "matches": ["http://*/*","https://*/*"], "js": ["back.js"], "run_at":"document_end" } ], "permissions": [ "tabs" ] }
3.建立文件。popup.html。
对应配置文件中的 "default_popup": "popup.html"。
点图标的时候我们会加载运行这个html,运行这个html引入的js。
这是一个普通的html页面。里面可以写css。也可以加载JavaScript文件。也可以给里面的节点添加事件什么的。
不过这个文件以及加载的js无法访问当前我们打开的标签页中的dom节点。
代码:
<html> <head> <meta charset="utf-8"> </head> <body> 这是popup.html里面。 </body> </html> <script src="popup.js"></script>
这里只用来加载一个js。
4.popup.js。 popup.html引入的js。这里我们用户它的做的事是向content_scripts中发送一个消息。相当于发一个命令。告诉content script,去办事吧。content_scripts的内容在后面,看完再回过来看一次这里。
chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) { // console.log(response.farewell); }); });
chrome.tabs.getSelected()这个函数能获取到当前标签的信息对象并传递给回调函数。
获取到tabId就是tab.id。可以自己console.log(tab)出来看一下。文章后面有对应调试控制台的打开方式。tab相关的接口可以查看:http://open.chrome.360.cn/extension_dev/tabs.html 很多接口都要用到这个参数:tabId ( integer ),其实就是用这个接口拿到tabId。
chrome.tabs.sendRequest()这个函数是向某个标签的content_script中发送一个消息。也需要tabId这个参数。chrome插件之间的通信接口可查看 :http://open.chrome.360.cn/extension_dev/messaging.html
5.back.js。也是我们这个插件中的content script。
这个文件是我们插入到当前标签页中运行的代码。它可以访问标签页面中的dom节点。
我们这里用它来是监听消息,消息来了就运行设置标签的函数。操作标签页中的dom节点。
对应配置文件中content_scripts下的back.js。
这个参数中的内容会被加载到当前打开的网页中,可以访问当前标签页的节点。
所以,我们对页面的操作往往会写在这个脚本里。有需要的话甚至可以加载个jQuery到里面。
但是这里的JavaScript与网页上原本的JavaScript不是一个环境下运行。具体区别可以自己去看开发文档。http://open.chrome.360.cn/extension_dev/content_scripts.html
代码:
function setA(){ var aDoms = document.getElementsByTagName('a'); var len = aDoms.length; for (var i = 0; i < len; i++) { aDoms[i].setAttribute("target","_blank") } } chrome.extension.onRequest.addListener( function(request, sender, sendResponse) { if (request.greeting == "hello"){ setA(); // sendResponse({farewell: "goodbye"}); }else{ // sendResponse({}); } } );
可能比较要注意的一点是popup.html与content_script之间的通信。
popup.html向标签页中的content_script发送消息。
content_script接收到消息,执行操作。
6.调试方式:
popup.html加载的js调试。
右键点击插件图标,选择审查弹出内容。(或者在弹出框里右键点击检查。)会弹出一个控制台。
点source可以看到我们的html和js资源。
content_script的调试:
打开页面控制台,点sources,然后点Contents scripts,可以看到浏览器插件会作用到页面的代码。
注意每次修改了代码要重新加载插件。
这样我们就完成了一个简单的chrome插件。
github:https://github.com/liusaint/JavaScript-record/tree/master/a%20chorme%20plugin
转载请注明出处:http://blog.csdn.net/liusaint1992/article/details/53207667
相关文章推荐
- 一个简单的Chrome拓展开发记录
- J2ME程序开发环境配置的一个简单例子
- Android 开发一个简单的照相机程序
- iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序
- 【Qt5开发及实例】19、一个简单的画图程序
- 在 .NET 中开发基于 Chrome 内核的浏览器-创建一个简单浏览器
- 一个简单的SWT程序实例及详解-Java基础-Java-编程开发
- Android 开发一个简单的照相机程序
- 【FreeMarker】【程序开发】一个简单的示例
- 一个简单的Linux C程序开发框架—linux-dev-framework
- MySvn--一个简单单机svn程序源码-delphi开发
- 使用structs2.0开发一个简单的用户登录程序
- 使用J2SE开发一个测试Xfire的webservice的简单程序
- 在 .NET 中开发基于 Chrome 内核的浏览器-创建一个简单浏览器 分类: C# 2014-10-27 16:27 594人阅读 评论(0) 收藏
- Shoes - 又一个Ruby发明,让开发GUI程序像开发webapp一样简单
- 使用jdk6开发一个简单的webservice程序
- 分享一个简单的资源管理器程序,主要是演示下LINQ在C#开发中的运用
- 简单的JSP购物程序(综合运用JavaBean、JDBC、JSP隐含对象,开发一个小型网上购物系统)
- iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序
- 在 .NET 中开发基于 Chrome 内核的浏览器-创建一个简单浏览器 分类: C# 2014-10-27 16:27 593人阅读 评论(0) 收藏