卢纳黍的想疗院


一个不务正业,爱纹身、爱金属乐、玩乐队、Bug制造专业的前端程序猿~


chrome插件编写基本入门

chrome插件编写基本入门

作为一名程序猿,怎么能不会写chrome插件呢[笑]
所以今天就教教大家怎么写最基本的chrome插件,不对,确切地说是互相学习一起学习。
(我是不会告诉你说我也是刚学会没多久的!😂)

基础知识:

首先,我们要知道一个 chrome插件需要哪些文件
其实很简单

  • 配置(入口)文件 manifest.json
  • xx.html
  • xx.css
  • xx.js
  • 图片

这就OK了,如果再看这篇文章的你 是一位前端攻城狮、程序猿,那么恭喜你,你的学习难度会很小分分钟的事情,很容易就能学会(当然我指的是基础,最基本的写法)

由于 html、css、js 及文件组织,跟普通的 web 开发一样,那写 Chrome 扩展主要就是 manifest 文件的编写和扩展的调试了

manifest.json

  • 基本属性

包括扩展的名称(name)、版本(version)、描述(description)、图标位置(icons)和 manifest 版本(manifest_version)等信息。
name、version 和 manifest_version 是必须的,而且 manifest_version 必须为 2

(别问我为啥是2,我也不知道)

举个栗子

{
    //这是必须的
    "name": "coding冒泡点赞狂魔",
    "manifest_version": 2, 
    "version": "1.0",
    //这是可选的
    "description": "coding点赞脚本"
}
  • browser_action

browser_action指定扩展的图标放在Chrome工具栏中,它定义了扩展图标文件位置(default_icon)、悬浮提示(default_title)和点击扩展图标所显示的页面位置(default_popup)
用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展,一个browser action图标还可以有tooltip、badge和popup。
如果你想创建一个不总是可见的图标, 可以使用page action来代替browser action.

举个栗子

{
  ...
  "browser_action": {
    "default_icon": "1.png",
    "default_title": "我是点赞狂魔",
    "default_popup": "popup.html"
  },
  ...
}
  • permissions
    这个牛逼了,比较重要的

permissions 属性是一个数组,它定义了扩展需要向 Chrome 申请的权限,比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡(tabs)、获取当前活动选项卡(activeTab)、浏览器通知(notifications)、存储(storage)等,可以根据需要添加。
扩展或app将使用的一组权限。每个权限是一列已知字符串列表中的一个,如geolocatioin或者一个匹配模式,来指定可以访问的一个或者多个主机。权限可以帮助限定危险,如果你的扩展或者app被攻击。一些权限在安装之前,会告知用户
如果一个扩展api需要你的声明一个权限在manifest文件,一般的,api的文档将告诉怎么做。例如,Tabs页面告诉你这么声明一个tabs权限。
这是一个扩展的manifest文件的权限设置的一部分。

举个栗子

{
  ...
  "permissions": [
    "tabs",
    "bookmarks",
    "http://www.blogger.com/",
    "http://*.google.com/",
    "unlimitedStorage",
    ...
  ], 
  ...
}
  • background

扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态。
background 可以使扩展常驻后台,比较常用的是指定子属性 scripts,表示在扩展启动时自动创建一个包含所有指定脚本的页面。

举个栗子

{
  ...
  "background": {
    "scripts": ["myscript.js"]
  },
  ...
}
  • content_scripts

Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息。

举个栗子

{
  ...
  "content_scripts": [
    {
      "matches": ["https://coding.net/*"],    // 这是必须项
      "js": ["jquery.min.js"],    // 这是可选
      "css": ["xx.css"],      // 这是可选
      ...
    }
  ]
  ...
}

使用 content_scripts 字段,一个扩展可以向一个页面注入多个content_script脚本;每个content script脚本可以包括多个javascript脚本和css文件。

简单的说content_scripts会根据你在它内部定义的 matches规则 去匹配url,然后在匹配成功的url页面中注入 你指定的js和css等

  • 好了, 学会这些之后,你就能做一个简单的 chrome插件了,有一点要注意==content scripts是打开页面后直接注入你可以不需要backgroundpermissions,而如果你想点击你的插件图标再执行注入的话你就必须使用backgroundpermissions 将代码注入页面,扩展必须具有cross-origin 权限, 还必须可以使用chrome.tabs模块。 可以通过在manifest文件的permissions字段里声明来取得这些权限。一旦设置好了权限,就可以通过调用executeScript()来注入javascript脚本。如果要注入css,可以调用insertCSS()。==*

举个栗子

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null,{code:"document.body.bgColor='red'"});
});

这样 你就可以点击图标之后把对应网页的背景色变成红色
然而,有时候我们的代码可能会比较多,直接写在executeScript()中不美观,那么我们就可以新建一个文件
举个栗子

/* action.js */
document.body.bgColor='red';
alert('已改变背景色');
/* main.js */
chrome.browserAction.onClicked.addListener(function(tab) {
  hrome.tabs.executeScript(null,{file:"action.js"});
});

总结

最后我们来总结一下上面所学习的部分,把所有代码整合到一起,就拿我的一个简单的基本插件为例:
目录结构:

---- 插件文件夹
-------- manifest.json
-------- jquery.min.js
-------- like.js
-------- myscript.js

  • manifest.js
{
    "name": "coding冒泡点赞狂魔",
    "manifest_version": 2,
    "version": "1.0",
    "description": "coding点赞脚本",
    "browser_action": {
        "default_icon": "1.png"
        "default_title": "我是点赞狂魔"
    },
    "permissions": [
        "tabs", "https://coding.net/*\"
    ],
    "background": {
        "scripts": ["myscript.js"]
    },
    "content_scripts": [
        {
            "matches": ["https://coding.net/*"],
            "js": ["jquery.min.js"]
        }
    ]
}
  • myscript.js
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null,{file:"like.js"});
});
  • like.js
jQuery('.heart.icon.empty').click();
console.log('已点赞');
console.log(jQuery('.heart.icon.empty').click());
alert('已点赞 '+ jQuery('.heart.icon.empty').click().length + '条');

参考链接

建议打赏金额1-10元

支付宝打赏

微信打赏

最近的文章

IOS10.3发布后对CompositionEvent 状态的更改

当我要打一个中文字,比如 日 ,那么我就要输入 ri 两个字母,而在某些时候我输入的字是要跟后端有数据交互的,那么在一些情况下我原本只想跟后端 交互 日 这一个字,然而因为 日的拼音是ri 所以可能…

IOS, IOS10.3, composition, 拼音输入 继续阅读
更早的文章

web高级开发的成长之路

读了这篇文章之后感觉蛮受启发的,在此分享一下,献给和我一样处于困惑的朋友。正文如下:本人也是coding很多年,虽然很失败,但也总算有点失败的心得,不过我在中国,大多数程序员都是像我一样,在一直走着弯…

前端 继续阅读
comments powered by Disqus