Google Chrome插件开发

Chrome浏览器是我在工作中常用的一个浏览器,作为程序员的我更喜欢单调简洁的风格,而Chrome恰恰是一个不错的选择,他的运行速度、界面风格以及强大的前端调试功能都是我一直使用他的理由。

在我们日常生活或者工作中难免出现在某些网站上做一些自动化的处理,或者希望开发出一些针对某些网站的辅助程序,当然可以实现这个需求的技术方案有很多,这里分享一个利用js写浏览器用户插件的方式来实现我们的这个需求。

首先举个例子,代码如下:

新建manifest.json文件

{
  "manifest_version": 2,

  "name": "Js Test",
  "description": "这是一个插件demo",
  "version": "1.0",

  "icons": {
    "128" : "icon.png"
  },
  "permissions": [
    "tabs", "http://*/*","https://*/*"
  ],
  "content_scripts": [
    {"js":["maidian.js"],"matches":["https://www.baidu.com/"]}
  ]
}

新建maidian.js文件

image-1-2-1
image-2-1-1
image-4-1-1
image-3-1-1
image-7-1
image-5-1-1

插件配置成功后工具栏会有相应的图标,在访问配置网站的时候根据我们设置的规则将js注入到主页中,因为这里我只写了一句alert所以在访问百度的时候就会自动执行这句代码弹出提示框,实际应用,我们可以写具体的js代码来对当前页面dom树和js进行调用。

image-6-1

下面是对配置项的解释

manifes_version:声明我们使用的版本
name:插件的名称
description:插件的描述
icons:插件显示的图标
permissions:插件使用的权限
     tabs:允许使用chrome.tabs和chrome.windows的api,后面则是匹配模式,指可以和该模式的网站运行的代码进行交互
Content scripts:指定Web页面内运行的javascript脚本,通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息
     js:要注入的脚本
marches:指定要注入脚本的url

这里推荐一个插件的分享网站:https://greasyfork.org/zh-CN/scripts,里面有很多好用的插件分享,下面是截图

image-8-1
image-9-1
image-10-1
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:小林博客 www.vvso.cn小林博客 » Google Chrome插件开发
分享到: 更多 (0)

评论 抢沙发

切换注册

登录

忘记密码 ?

切换登录

注册