chrome扩展的开发
这是本人写的第一个chrome扩展，这个扩展的广泛适用性不强，可是确实很方便，具体的开发流程写在这里，感兴趣的看官能够试着本身动手写一写javascript
这个扩展的做用是change query，它的适用场景是更换百度搜索页的关键词，而且跳转，若是你理解了这个意思，那你必定会想『这能有什么用？』，是的，这在具体生活和工做中一点用处都没有，它仅仅对笔者和笔者身边的产品与测试有一点用处，笔者这两个月的开发任务是一组query下的百度搜索结果页卡片。在这里，笔者想说本身开发chrome扩展更多的是知足本身的切身须要，因地制宜css
下面主要介绍具体开发流程html
manifest.json配置文件
第一步就是建立manifest.json配置文件：java
manifest_version、name和version为必选，其它为可选chrome这个文件中
manifest_version默认为2jsonname、version和description很明显，其中version要书写规范，且递增apiicons是一个对象，key是像素值，value是图片地址，chrome会选取合适像素的图片在合适的位置（右上角仍是扩展程序页面）当作logoappbackground指后台执行环境，指定js文件就能够，由于后台基本没有展示页面的须要编辑器permissions指都用到了哪些权限，本地保存的权限，操做tab页的权限等，这些权限要在这里声明学习browser_action指左键点击右上角logo弹出的页面，这个页面在点开的时候加载出来，收回的时候被销毁options_page指右键点击右上角logo弹出列表中的选项是否可点，与可点时左键点击打开的页面content_scripts指能够在chrome窗口页运行的js文件，matches用来匹配哪些url的窗口页运行
{
"manifest_version": 2,
"name": "Change query",
"version": "1.0",
"description": "快速切换导入列表中的query",
"icons": {
"48": "img/icon48.png"
},
"background": { "scripts": ["./js/background.js"] },
"permissions": [
"storage",
"tabs"
],
"browser_action": {
"default_icon": {
"38": "img/icon38.png"
},
"default_popup": "popup.html"
},
"options_page": "options.html",
"content_scripts": [
{
"matches": [
"http://*.baidu.com/",
"https://*.baidu.com/"
],
"js": ["js/open.js"]
}
]
}
chrome主要提供了三个运行环境，background后台持续运行环境，browser_actionlogo弹出页短暂运行环境，content_scripts用户正在浏览页面的操做环境，这个环境里能够操做页面内的元素，可是与页面内的原始js是各自独立的，这三个环境能够经过chrome提供的runtime接口来实现通讯，经过runtime接口还能够在不一样扩展间通讯
开发browser_action页面
笔者开发的这个chrome拓展，功能很小，只用到了browser_action页面，本文也将只介绍browser_action页面的开发，下面是html代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<textarea class="query-area"></textarea>
<ul class="query-list"></ul>
<button id="btn">提交</button>
<button id="prev">上一个</button>
<button id="next">下一个</button>
</body>
<script type="text/javascript" src="./js/popup.js"></script>
</html>
这里须要注意的是:
不能够在html页面里面直接写js代码，只能引用js文件
上文提到的，这个页面点开建立页面，收回销毁页面，不会保存变量信息
Change query拓展的用处
html上面的元素很简单，一个textarea，一个ul，三个button。本拓展的逻辑是在textarea中粘贴进query列表，点击『提交』按钮，接下来经过点击『上一个』或『下一个』来切换相邻query，跳转到相应的结果页面
这个拓展开发的目的很简单，在开发完成后，要对全部的搜索query进行确认，须要在编辑器上复制query，粘贴到输入框回车，切换起来很繁琐，因此开发了这个一次性复制粘贴query，而后在拓展上点击就能够轻松切换query，节省测试时间
第一步，点开popup页：
第二步，复制query列表，粘贴进textarea：
第三步，提交：
第四步，点击下一页：
能够看到飘红的query是当前搜索的query：
Change query拓展用到的API
只用到了两个API，chrome.storage.local与chrome.tabs，使用这两个API须要在manifest.json文件的permissions中添加『storage』和『tabs』
chrome.storage.local用来本地存储数据，具体使用的两个方法：
chrome.storage.local.set({});
chrome.storage.local.get(null, function(data) {});
chrome.tabs用来操做tab页，具体使用的方法：
// 获取当前用户正在浏览的tab页的url
chrome.tabs.query({active: true}, function(tabs) {
self.url = tabs[0].url;
});
// 监听当用户切换tab页时，获取切换到的tab页的url
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
self.url = tab.url;
});
// 操做当前tab页跳转url
chrome.tabs.update(null, {url:nextUrl});
本项目的下载地址：点击下载
总结
chrome拓展商店里有不少优秀的拓展能够方便咱们的生活与工做
chrome拓展开发很简单，多多动手，科技改变生活
对想学习更详细chrome拓展的同窗，推荐这里学习：
文章转载自笔者我的博客 Gaoxuefeng's Blog