请记住我们的网址:3zcode.com。也就是“三只源码"

如何快速掌握并开发谷歌浏览器插件

教程 admin 1823℃ 0评论

想做个采集功能,发现目标网站的数据使用ajax加载。用php做采集并不能很好的实现,于是想到使用浏览器插件。

值得庆幸的是,现在很多国内浏览器都使用chrome内核,文档也相对多些,比如360浏览器,百度浏览器。在查找这些资料时,却是找到不少,以下是资料链接。

图灵社区:Chrome扩展及应用开发(http://www.ituring.com.cn/minibook/950)

百度浏览器 Javascript API(https://chajian.baidu.com/developer/extensions/api_index.html)

360安全浏览器应用开发平台(http://open.se.360.cn/open/extension_dev/tut_debugging.html)

建议:直接查看百度浏览器插件开发入门(https://chajian.baidu.com/developer/extensions/getstarted.html)。跟着实例做,他们还提供实例源码下载。后来只需要查看百度浏览器 Javascript API(https://chajian.baidu.com/developer/extensions/api_index.html)来开发了。

 

开发一个插件第一步:清单文件

清单文件是一个json格式的文件,定义了扩展的信息、权限以及所引用的资源。

清单文件格式详解在这:https://chajian.baidu.com/developer/extensions/manifest.html

一般的一个清单文件具有,扩展名、扩展描述、manifest_version、版本号、图标、权限、background、content_scripts等。

下面是我插件的manifest.json。

{
“manifest_version”: 2,
“name”: “网页采集”,
“version”: “1.0”,
“description”: “专为桃心美图网开发,用于数据采集”,
“permissions”: [
“contextMenus”,
“notifications”,
“webRequest”
],
“background”:{
“page”:”background.html”
},
“content_scripts”: [
{
“matches”: [“*://*/*”],
“js”: [“js/zepto.min.js”,”js/content.js”]
}
]

}

 

开发一个插件第二步:后台页面(脚本)

这个文件会运行在后台,用来处理一些长时间运行的任务和状态。我在background.html引用了background.js文件,在background.js文件中创建了一个右键菜单。

开发一个插件第三步:页面脚本

页面脚本是用来编写脚本的,浏览器插件会将页面脚本注入到浏览器页面。我在content_scripts中编写了操作页面dom的脚本。

开发一个插件第四步:通信

因为安全策略和权限的因素,后台是不能直接在页面执行脚本的。比如我要实现点击右键菜单改变DOM元素,或者获得当前页面url,后台脚本都是不能做到的。只有通过内容脚本实现,后台脚本和内容脚本又不可直接调用。所以才有了通信,使用chrome.tabs.sendMessage发送信息,使用chrome.runtime.onMessage.addListener接收信息,完成通信。

 

 

转载请注明:三只源码 » 如何快速掌握并开发谷歌浏览器插件

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址