昨天我上某漫画网站必威:,即可快速开发一个

必威 1Chrome互连网应用店

chrome扩充开拓入门教程

如今在开采chrome插件,看见一篇特别符合入门的科目,特记录一下

前几天自己上某漫画网址,看见斗破苍穹有一集更新,点开后出现提示:

应公司要求,须求给集团测验写八个chrome插件来落到实处自动化,经查询与搜索,插件不慢就马到成功了,下边临于chrome插件编写实行简短描述

Chrome扩大开垦

标签(空格分隔): Chrome扩张


Chrome网络行使店�有加多的选拔和插件,那些工具不小的滋长了大家的生育成效。但是本文不是给大家推荐那么些精品插件名单,而是教你怎么着作为一名开采者,为Chrome进献自个儿的插件。

注:转载

本文首发于 http://liuxianan.com,原作地址:http://blog.liuxianan.com/chrome-plugin-develop.html,转发请注脚签字“liuxianan”并在引人注目地点保留原版的书文链接,感激!
author: liuxianan

以下是小说内容

为保卫安全版权方权益或违反国家法律法则本站不提供阅读,请点击这里 步入版权方平台阅读

编写chrome插件

引入:

chrome开辟文书档案

360翻译文书档案 ---- 只做为借鉴运用

Chrome扩大及应用开垦--电子书

1、写在前边

Chrome插件是三个用Web本事开荒、用来增长浏览器成效的软件,Chrome浏览器扩大开采算是一定轻巧的,基本假诺领悟HTML+CSS+Javascript,就能够飞快支付一个属于您的Chrome插件!它实际上就是三个由HTML、CSS、JS、图片等财富结合的七个.crx后缀的回退包.

推荐用收取薪资的VPN,以便于继续的一七种职业。不要把精力都花在了弄无偿的翻墙工具上,终究收取薪资的也不贵。

写在近日

自个儿花了临近叁个多月的时光时有时无写下那篇博文,并精心写下全部demo,所以转发必须保留 http://blog.liuxianan.com/chrome-plugin-develop.html 。本文全部涉嫌到的超越五成代码均在这几个demo里面:https://github.com/liuxianan/chrome-plugin-demo ,大家能够直接下载下来运营。

除此以外,本文图片比较多,请耐心等待加载达成。

本文目录:

image

demo部分截图:

image

点击后赶到了忘年交漫客网址,http://www.zymk.cn/1453/34274.html 必要付费购买了,一期是3元。

进去扩充程序

  1. chrome ---- chrome://extensions
  2. 360 ---- se://extensions

2. 读书Chrome插件开辟有怎么着意思

增长浏览器功用,轻松达成属于自个儿的“定制版”浏览器,等等。

Chrome插件提供了不菲实用API供大家利用,包罗但不限于:

  • 书签调整;
  • 下载调节;
  • 窗口调控;
  • 标签调整;
  • 网络央浼调控,
  • 各队事件监听;
  • 自定义原生菜单;
  • 八面玲珑的通讯机制;
  • 等等;

要想在�Chrome网络应用店(下文简称webstore)发表应用,要求在�webstore的开垦者音讯基本登记一下,填音信的时候你会意识并未有中华夏族民共和国民代表大会洲地域,所以谷歌在暗指天朝人民要用假的地址注册,于是小编机智的选取了宝岛辽宁。

前言

不购买时,会出现遮挡层和一个唤起您购买的窗口,此时是无力回天点击下一页的,但从不屏蔽键盘事件,通过键盘的左右箭头还是得以翻页的,通过那几个bug,我们能够无需付费看卡通了。

翻看扩大插件源码

  1. chrome ---- chrome://version
  2. 360 ---- se://version

chrome版本中央

跻身白色表明的文书档案地址,找到extension文件夹并跻身,里面纵使本机的chrome插件库(360同上)

3. 为啥是Chrome插件并非Firefox插件

  • Chrome占有率越来越高,更两人用;
  • 支出更简便易行;
  • 应用场景更加宽泛,Firefox插件只可以运转在Firefox上,而Chrome除了Chrome浏览器之外,还足以运作在具备webkit内核的进口浏览器,比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等;
  • 除外,Firefox浏览器也对Chrome插件的运行提供了自然的支撑;

下一场Google还要你提供叁个VISA/MasterCard账号,用来缴纳5澳元注册费。作者差一点就真去办VISA卡了,后来网络一查,国内的VISA卡恐怕会注脚失利,去天猫商城上买虚构卡又不放心,奋战一钟头后作者发掘一个巧妙的网址:全世界付.

什么是Chrome插件

严加来说,大家正在说的事物应该叫Chrome扩张(Chrome Extension),真正含义上的Chrome插件是更底层的浏览器功效扩展,恐怕须要对浏览器源码有自然调整才有力量去付出。鉴于Chrome插件的叫法已经习贯,本文也整个选取这种叫法,但读者需深知本文所汇报的Chrome插件实际上指的是Chrome扩展。

Chrome插件是几个用Web技艺开采、用来拉长浏览器效率的软件,它实质上便是叁个由HTML、CSS、JS、图片等能源整合的一个.crx后缀的缩减包.

个人测度crx可能是Chrome Extension通常来讲3个假名的简写:

image

除此以外,其实不只是前面八个技术,Chrome插件还足以相配C++编写的dll动态链接库完结部分更底层的功效(NPAPI),例如全显示器截图。

360抢票王插件dll截图

是因为安全原因,Chrome浏览器42之上版本已经时有时无不再支持NPAPI插件,替代它的是更安全的PPAPI。

三种方法:

步向正题

4. 开销与调治

Chrome插件未有严刻的品类结构供给,只要保障本目录有二个manifest.json就可以,也不须求极度的IDE,普通的web开垦工具就能够。
从右上角菜单->更加的多工具->扩张程序能够步入插件管理页面,也得以直接在地方栏输入 chrome://extensions 访问。

必威 2

此间输入图片的叙说

.
勾选开荒者方式即能够文件夹的款式直接加载插件,不然只可以安装.crx格式的文本。Chrome须要插件必需从它的Chrome应用集团安装,另外任何网址下载的都无法直接设置,所以,其实我们得以把crx文件解压,然后通过开辟者形式直接加载。

付出中,代码有别的更换都不能够不再度加载插件,只需求在插件管理页按下Ctrl+奇骏就可以,防止万一最佳还把页面刷新一下。

必威 3mastercard

学学Chrome插件开辟有哪些含义

加强浏览器效用,轻便实现属于自个儿的“定制版”浏览器,等等。

Chrome插件提供了成都百货上千实用API供我们利用,富含但不防止:

  • 书签调整;
  • 下载调控;
  • 窗口调节;
  • 标签调节;
  • 网络须求调整,各样事件监听;
  • 自定义原生菜单;
  • 包罗万象的通讯机制;
  • 等等;
  • js删除遮挡层的dom节点

编写chrom插件 Getting Started

5. 主导介绍

那网址专门用来搞五洲四海购物的,冲100块钱,自动给你生成Master卡德账号,然后你就可以拿那几个�卡号音讯去注册webstore开垦者了,分分钟验证通过,并从未网民说的那么麻烦。

缘何是Chrome插件并不是Firefox插件

  1. Chrome分占的额数更加高,越多个人用;
  2. 付出更简明;
  3. 利用场景更广阔,Firefox插件只好运维在Firefox上,而Chrome除了Chrome浏览器之外,仍是能够运营在富有webkit内核的国产浏览器,比方360极速浏览器、360有惊无险浏览器、搜狗浏览器、QQ浏览器等等;
  4. 除去,Firefox浏览器也对Chrome插件的运作提供了一定的支持;
一、配置入口文件 manifest.json`

正如如今各样前端工具类似,在编辑chrome插件以前也急需在根目录下增加三个入口文件,名称必需为manifest.json

{
    // ------------------------------必须的字段------------------------------
    "name": "My Extension",
    "version": "versionString",
    "manifest_version": 2,
    /*
        用整数表示manifest文件自身格式的版本号,从chrome18开始,开发者指定版本号为2(2014年1月之后不可在用1,关于1和

        2的区别,可以参考如下文档 https://developer.chrome.com/extensions/manifestVersion )
    */

    // ------------------------------建议提供的字段------------------------------
    "description": "A plain text description",

    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    /*
        128x128的图标将在webstore安装时候使用;48x48的图标在扩展管理页面需要这个图标;16x16的图标作为扩页面的fa网页图标

        图标建议是png格式,因为png格式是对透明支持最好的,也可以用其他webkit支持的格式

        注意:请只使用文档说明的图标大小。
    */

    "default_locale": "en",
    /* 支持国际化,对于我们国语还没说明白的来讲,建议不使用 */

    // ------------------------------多选一,或者都不提供------------------------------
    "browser_action": {
        "default_icon": { // optional
                "16": "images/icon16.png", // optional
                "24": "images/icon24.png", // optional
                "32": "images/icon32.png" // optional
            },
        "default_title": "Google Mail", // optional; shown in tooltip
        "default_popup": "popup.html" // optional
    /*
        用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标

        如果你想创建一个不总是可见的图标, 可以使用page action来代替browser action

        default_popup当用户点击图标后出现,popup可以包含任意你想要的html内容,并且会自适应大小

        此字段提供了一些API请参考(https://developer.chrome.com/extensions/browserAction)

        例如:chrome.browserAction.onClicked.addListener(function(tab){...}) ,当用户点击图标时候的事件监听

browser_action_click.png

        但是当browser action是一个popup的时候,这个事件不会被触发
    */
    },

browser_action.png

    "page_action": {
    /*
        使用pack_action把图标放置到地址栏里。定义需要处理的页面的事件,但是它们不是适用于所有页面

        (文档地址https://developer.chrome.com/extensions/pageAction)

        用法和browser_action类似,不过官方建议使用browser_action
    */
    },

page_action.png

    // ------------------------------根据需要提供------------------------------
    "author": ...,
    "automation": ...,
    "background": {
        // Recommended
        "scripts": ["background.js"],
        //浏览器的扩展系统会自动根据上面scripts字段指定的所有js文件自动生成背景页
        "page": "background.html"
        //如果您的确需要自己的背景页,可以使用page字段
        "persistent": false
    /*
        扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态,背景页是一个运行在扩展进程中的html页面。

        (文档https://developer.chrome.com/extensions/background_pages)

        它在你的扩展的整个生命周期都存在,同时,在同一时间只有一个实例处于活动状态
    */
    },
    "background_page": ...,
    "content_scripts": [{
        "matches": ["http://www.google.com/*"],
        "css": ["mystyles.css"],
        "js": ["jquery.js", "myscript.js"],
        "run_at": "document_end"
    /*
        在web页面内运行的js脚本,通过使用标准DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些

        但是也有一些限制:

        不能使用除chrom://exntension之外的chrome.*的接口

        不能访问它所在扩展中定义的函数和变量

        不能访问web页面或其他content script中定义的函数和变量

        不能做cross-site XMLHttpRequests

        但是: content_scripts可以使用messages机制与它所在的扩展通信,来间接使用chrome:*接口,或访问扩展数据

        (开发文档:https://developer.chrome.com/extensions/content_scripts)
    */
    }],
    "content_security_policy": "policyString",
    /*
        开启内容安全策略,引入了严格的策略使扩展更安全,同时提供创建和实施策略规则的能力

        禁止使用内嵌inline形式的js脚本,所有js脚本要外部引用
    */

    "homepage_url": "https://www.baidu.com",
    //用来展示自己的网站

    "import": [{
        "id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        //共享模块是可以在其他扩展程序和应用程序之间共享的无权资源集合
    }],

    "incognito": "spanning, split, or not_allowed",
    //定义扩展在隐身模式下的开启模式 ,使用 "not_allowed"以防止在隐身模式下启用了此扩展

    "minimum_chrome_version": "versionString",
    //声明该扩展需要的最低chrome浏览器版本

    "offline_enabled": true,
    //声明该扩展是否支持脱机模式运行

    "omnibox": {
        "keyword": "aString"
        //当用户在地址栏输入你的扩展关键字,用户开始与你的扩展交互 ---- 自测无用
        //(文档地址:https://developer.chrome.com/extensions/omnibox)
    },

    "optional_permissions": ["tabs"],
    //声明permissions可选权限

    "options_page": "options.html",
    /*
        为了让用户设定你的扩展功能,你可能需要提供一个选项页,如果你提供了选项页

        在扩展管理页面 chrome://extensions上会提供一个链接。点击选项链接就可以打开你的选项页

        (文档地址:https://developer.chrome.com/extensions/options)
    */

    "options_ui": {
        "chrome_style": true,
        "page": "options.html"
    },
    //同上 (文档地址:https://developer.chrome.com/extensions/optionsV2)

    "permissions": ["tabs"],
    /*
        (文档地址:https://developer.chrome.com/extensions/declare_permissions)

        声明权限:在使用chrome提供的API,扩展程序必须在manifest.json的permissions字段中声明其意图

        如果一个扩展api需要你的声明一个权限在manifest文件,一般的,api的文档将告诉怎么做。例如,Tabs页面告诉你这么声明一个tabs权限
    */

    "plugins": [...],
    /*
        NPAPI插件,运行在此插件中的代码拥有当前用户的全部权限,鉴于可能会引入风险,甚至在上传web store时,该插件需人工审核
    */

    "requirements": {
        "3D": {
            "features": ["css3d", "webgl"]
        }
    },
    /*
        指定该扩展所需的特殊功能,目前只支持指定“3D”,也就是GPU加速
    */

    "sandbox": [...],
    //沙盒,在这里可以使用内联js

    "short_name": "Short Name",

    "update_url": "http://path/to/updateInfo.xml",
    //扩展自动升级检测(文档地址:https://developer.chrome.com/extensions/autoupdate)

    "version_name": "aString",
    //描述性版本字符串

    "web_accessible_resources": [
        "images/*.png",
        "style/double-rainbow.css",
        "script/double-rainbow.js",
        "script/main.js",
        "templates/*"
    ]
    /*
        一组字符串,指定扩展在注入的目标页面上所需要使用的资源路径(相对于扩展的安装根目录),可用通配符匹配

        (文档地址:https://developer.chrome.com/extensions/manifest/web_accessible_resources)
    */
}

Chrome Platform APIs

5.1 manifest.json

那是多个Chrome插件最关键也是不能缺少的文本,用来配置全体和插件相关的布置,必需放在根目录。在那之中,manifest_version、name、version3个是不可或缺的,description和icons是引用的。

上边给出的是部分大范围的布局项,均有汉语注释,完整的布置文书档案请戳 这里 。

{
    // 清单文件的版本,这个必须写,而且必须是2
    "manifest_version": 2,
    // 插件的名称
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件描述
    "description": "简单的Chrome扩展demo",
    // 图标,一般偷懒全部用一个尺寸的也没问题
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 会一直常驻的后台JS或后台页面
    "background":
    {
        // 2种指定方式,如果指定JS,那么会自动生成一个背景页
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 浏览器右上角图标设置,browser_action、page_action、app必须三选一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的标题,可选
        "default_title": "这是一个示例Chrome插件",
        "default_popup": "popup.html"
    },
    // 当某些特定页面打开才显示的图标
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是pageAction",
        "default_popup": "popup.html"
    },*/
    // 需要直接注入页面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多个JS按顺序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
            "css": ["css/custom.css"],
            // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
            "run_at": "document_start"
        },
        // 这里仅仅是为了演示content-script可以配置多个规则
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 通知
        "webRequest", // web请求
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
    ],
    // 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的
    "web_accessible_resources": ["js/inject.js"],
    // 插件主页,这个很重要,不要浪费了这个免费广告位
    "homepage_url": "https://www.baidu.com",
    // 覆盖浏览器默认页面
    "chrome_url_overrides":
    {
        // 覆盖浏览器默认的新标签页
        "newtab": "newtab.html"
    },
    // Chrome40以前的插件配置页写法
    "options_page": "options.html",
    // Chrome40以后的插件配置页写法,如果2个都写,新版Chrome只认后面这一个
    "options_ui":
    {
        "page": "options.html",
        // 添加一些默认的样式,推荐使用
        "chrome_style": true
    },
    // 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
    "omnibox": { "keyword" : "go" },
    // 默认语言
    "default_locale": "zh_CN",
    // devtools页面入口,注意只能指向一个HTML文件,不能是JS文件
    "devtools_page": "devtools.html"
}

有关剩下的钱,你能够买点儿别的,只怕转到其余银行卡里,机智如自个儿。

付出与调治

Chrome插件未有严谨的门类布局供给,只要有限支撑本目录有四个manifest.json就可以,也不需求特地的IDE,普通的web开辟工具就能够。

从右上角菜单->越来越多工具->扩大程序能够进来 插件管理页面,也得以从来在地点栏输入 chrome://extensions 访问。

image

勾选开发者模式即能够文件夹的格局直接加载插件,不然只可以设置.crx格式的文书。Chrome供给插件必得从它的Chrome应用市肆安装,其余任何网站下载的都没有办法儿直接设置,所以,其实我们能够把crx文件解压,然后通过开荒者方式直接加载。

支出中,代码有别的变动都必需再一次加载插件,只须求在插件管理页按下Ctrl+R就能够,防止万一最佳还把页面刷新一下。

var bg_child=document.getElementById("layui-layer-shade1"); 
bg_child.parentNode.removeChild(bg_child); 
var w_child=document.getElementById('layui-layer1');
w_child.parentNode.removeChild(w_child);
调试

浏览器访问:chrome-extension://<插件ID>/插件入口html文件

5.2 content-scripts

所谓content-scripts,其实便是Chrome插件中向页面注入脚本的一种情势(尽管名称为script,其实还足以满含css的),借助content-scripts大家能够实现通过陈设的方法轻便向钦命页面注入JS和CSS(假如需求动态注入,能够参谋下文),最常见的比方说:广告屏蔽、页面CSS定制,等等。

示范配置:

{
    // 需要直接注入页面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多个JS按顺序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
            "css": ["css/custom.css"],
            // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
            "run_at": "document_start"
        }
    ],
}

特别注意,若无积极性钦点run_at为document_start(默认为document_idle),上边这种代码是不会立见成效的

document.addEventListener('DOMContentLoaded', function()
{
    console.log('我被执行了!');
});

content-scripts和原始页面分享DOM,不过不分享JS,如要访谈页面JS(举个例子某些JS变量),只好通过injected js来达成。content-scripts不能够访谈绝大部分chrome.xxx.api,除了上边那4种:

  • chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
  • chrome.i18n
  • chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
  • chrome.storage

事实上看来此间实际不是悲观,那些API绝超过四分之二时候都够用了,非要调用其余API的话,你还足以经过通讯来落到实处让background来帮你调用(关于通讯,后文有详尽介绍)。

好了,Chrome插件给大家提供了那般强大的JS注入功效,剩下的便是表达您的想象力去吐槽浏览器了。

�webstore有三种程序种类:应用、游戏、扩张程序、主题背景。放心,都以用JS来写的,对于前端来讲独有一星门槛。本文不会讲实际基础开荒文化,因为这边曾经有十分好的教学资料了:

骨干介绍

  • css隐敝遮挡层的dom节点

注意:

  1. 不可使用内联js
  2. manifes.json文件为json文件,再打包上传chrome店铺时,不可包涵注释和中文

5.3 background

后台(姑且这么翻译啊),是三个常驻的页面,它的生命周期是插件中享有品类页面中最长的,它随着浏览器的开发而展开,随着浏览器的停业而停业,所以平常把要求直接运维的、运行就运维的、全局的代码放在background里面。

background的权能相当高,差相当的少能够调用全体的Chrome扩大API(除了devtools),何况它能够随意跨域,也便是可以跨域访谈任何网址而不供给供给对方设置COGL450S。

通过测验,其实不仅是background,全数的一向通过chrome-extension://id/xx.html这种艺术打开的网页都能够自由跨域。

配置中,background能够通过page内定一张网页,也得以通过scripts直接钦定多个JS,Chrome会自动为这么些JS生成二个暗中认可的网页:

{
    // 会一直常驻的后台JS或后台页面
    "background":
    {
        // 2种指定方式,如果指定JS,那么会自动生成一个背景页
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
}
  • Chrome 扩充及运用开拓.来自图灵社区的免费电子书,适合入门。
  • Chrome增加开辟文书档案.来自360极速浏览器翻译的法定文书档案。
  • Chrome 插件开垦官方文书档案.前四个切合入门,实际支出的时候仍然引入官方的,查API啥的都很有利。

manifest.json

这是多少个Chrome插件最要紧也是不能缺少的文本,用来配置全数和插件相关的安插,必得放在根目录。当中,manifest_versionnameversion3个是少不了的,descriptionicons是引用的。

下边给出的是部分布满的布局项,均有普通话注释,完整的布局文书档案请戳这里。

{
    // 清单文件的版本,这个必须写,而且必须是2
    "manifest_version": 2,
    // 插件的名称
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件描述
    "description": "简单的Chrome扩展demo",
    // 图标,一般偷懒全部用一个尺寸的也没问题
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 会一直常驻的后台JS或后台页面
    "background":
    {
        // 2种指定方式,如果指定JS,那么会自动生成一个背景页
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 浏览器右上角图标设置,browser_action、page_action、app必须三选一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的标题,可选
        "default_title": "这是一个示例Chrome插件",
        "default_popup": "popup.html"
    },
    // 当某些特定页面打开才显示的图标
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是pageAction",
        "default_popup": "popup.html"
    },*/
    // 需要直接注入页面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多个JS按顺序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
            "css": ["css/custom.css"],
            // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
            "run_at": "document_start"
        },
        // 这里仅仅是为了演示content-script可以配置多个规则
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 通知
        "webRequest", // web请求
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
    ],
    // 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的
    "web_accessible_resources": ["js/inject.js"],
    // 插件主页,这个很重要,不要浪费了这个免费广告位
    "homepage_url": "https://www.baidu.com",
    // 覆盖浏览器默认页面
    "chrome_url_overrides":
    {
        // 覆盖浏览器默认的新标签页
        "newtab": "newtab.html"
    },
    // Chrome40以前的插件配置页写法
    "options_page": "options.html",
    // Chrome40以后的插件配置页写法,如果2个都写,新版Chrome只认后面这一个
    "options_ui":
    {
        "page": "options.html",
        // 添加一些默认的样式,推荐使用
        "chrome_style": true
    },
    // 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
    "omnibox": { "keyword" : "go" },
    // 默认语言
    "default_locale": "zh_CN",
    // devtools页面入口,注意只能指向一个HTML文件,不能是JS文件
    "devtools_page": "devtools.html"
}

写一个chrome插件demo

关于浏览器加载时间的插件
1、成立并布置manifest.json文件

{ "name": "Test",
 "manifest_version": 2,
 "version": "1.0.0",
 "devtools_page": "devtools.html",
 "background":{"scripts":["background.js"]},
 "browser_action": {
     "default_popup": "popup.html"
  },
  "icons": {
     "128": "images/icon128.png",
     "16": "images/icon16.png",
     "48": "images/icon48.png"
  }
}

2、这里既是使用了devtools,编写devtools.js

chrome.devtools.panels.create('Test', 'icon16.png', '/demo1.html', function(extensionPanel) {
    var _window; // Going to hold the reference to panel.html's `window`

    var data = [];
    var port = chrome.runtime.connect({name: 'devtools'});
    port.lineTime = [];
    chrome.devtools.network.onRequestFinished.addListener(
    // console.log(notifyDevtools);
      function(request) {
          var url = request.request.url,
              time = request.time;
          if(url.substring(0, 9) === "chrome://" || url.substring(0, 19) === "chrome-extension://" || url.substring(0, 7) === "file://") return;
          chrome.runtime.sendMessage({url: url,time: time});
    });
});

3、需求动用background.js

var ports = [],
    datas = [];
chrome.runtime.onConnect.addListener(function(port) {
    if (port.name !== "devtools") return;
    ports.push(port);
    port.onDisconnect.addListener(function() {
        var i = ports.indexOf(port);
        if (i !== -1) ports.splice(i, 1);
    });
});

chrome.runtime.onMessage.addListener(function(msg) {
    if(localStorage['drawOver'] == 1){
        datas = [];
        localStorage['drawOver'] = null;
    }
    datas.push(msg);
    localStorage["domains"] = JSON.stringify(datas);
});

4、写html文件

<!DOCTYPE html>
<html>

<head>
    <title>弹出框</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="popup.css">
</head>

<body>
    <div id="main"></div>
    <script type="text/javascript" src="echarts.common.min.js"></script>
    <script type="text/javascript" src="theme/macarons.js"></script>
    <script type="text/javascript" src="popup.js"></script>
</body>
</html>

那边大家引进了EchartsLogo插件
具体不细说了,看成效图:
以百度为例:

www.baidu.com加载深入分析图

5.4 event-pages

那边顺带介绍一下event-pages,它是贰个哪些东西呢?鉴于background生命周期太长,长日子挂载后台恐怕会影响属性,所以谷歌(Google)又弄二个event-pages,在布局文件上,它与background的唯一区别正是多了三个persistent参数:

{
    "background":
    {
        "scripts": ["event-page.js"],
        "persistent": false
    },
}

它的生命周期是:在被须求时加载,在悠闲时被关闭,什么叫被亟需时呢?比方第三回安装、插件更新、有content-script向它发送音讯,等等。

除此之外布署文件的生成,代码上也会有一对轻微变化,个人那个大概询问一下就行了,常常情形下background也不会很费用品质的。

webstore开荒自身其实也是新手,但稍事经验应该能支援到别的人:

content-scripts

所谓content-scripts,其实就是Chrome插件中向页面注入脚本的一种方式(即便名叫script,其实仍是能够包含css的),借助content-scripts大家能够兑现通过配备的议程轻易向钦定页面注入JS和CSS(要是须要动态注入,能够参见下文),最常见的譬如说:广告屏蔽、页面CSS定制,等等。

示范配置:

{
    // 需要直接注入页面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多个JS按顺序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
            "css": ["css/custom.css"],
            // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
            "run_at": "document_start"
        }
    ],
}

极其注意,若无积极性钦命run_atdocument_start(默认为document_idle),上边这种代码是不会立见成效的:

document.addEventListener('DOMContentLoaded', function()
{
    console.log('我被执行了!');
});

content-scripts和原始页面分享DOM,可是不分享JS,如要访谈页面JS(举例有个别JS变量),只好通过injected js来实现。content-scripts不可能访谈绝超越一半chrome.xxx.api,除了上面那4种:

  • chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
  • chrome.i18n
  • chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
  • chrome.storage

事实上看来此间并非悲观,这几个API绝大多数时候都够用了,非要调用别的API的话,你还足以经过通讯来促成让background来帮你调用(关于通讯,后文有详细介绍)。

好了,Chrome插件给大家提供了那般强大的JS注入功效,剩下的正是表明您的想象力去戏弄浏览器了。

div#layui-layer-shade1 {
    display: none;
}

div#layui-layer1 {
    display: none;
}
对于该插件小编并未有优化,只是做了实验性demo,感兴趣的意中人能够深刻尝试,举个例子:印象笔记的剪藏插件,就是一款很好的插件

注:以上内容版权全数,我:K丶Aionro,如有转发,请证明出处!多谢!

5.5 popup

popup是点击browser_action或者page_actionLogo时张开的三个小窗口网页,主题离开网页就立即关闭,日常用来做一些有的时候的互相。

必威 4

此处输入图片的陈说

popup能够满含自由你想要的HTML内容,并且会自适应大小。能够由此default_popup字段来钦定popup页面,也得以调用setPopup()方法。

布局情势:

{
    "browser_action":
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的标题,可选
        "default_title": "这是一个示例Chrome插件",
        "default_popup": "popup.html"
    }
}

急需特别注意的是,由于单击Logo展开popup,宗旨离开又立马关闭,所以popup页面包车型大巴生命周期日常非常短,需求长日子运作的代码千万不要写在popup里面。

在权力上,它和background非常周围,它们中间最大的差异是生命周期的两样,popup中得以一贯通过chrome.extension.getBackgroundPage()获取background的window对象。

1.如何高贵的调节和测量检验

右键Chrome工具栏的小Logo会弹出四个窗口,选用核查弹出内容即可调整。可是这种措施极度低效,直接chrome://extensions/找到你插件的ID:

必威 5Chrome 插件 �ID然后浏览器访问:

chrome-extension://<插件ID>/�插件入口html文件

举个例子说作者的是:

chrome-extension://fnfchnalfnjbjbfeccpophocngdgapad/index.html

接下来就足以欢腾的调解了。

background

后台(姑且这么翻译啊),是一个常驻的页面,它的生命周期是插件中持有体系页面中最长的,它随着浏览器的展开而开采,随着浏览器的闭馆而关门大吉,所以普通把要求直接运营的、运维就运营的、全局的代码放在background里面。

background的权位极高,大概能够调用全数的Chrome扩大API(除了devtools),何况它能够轻松跨域,相当于能够跨域访谈任何网址而不要求供给对方设置CORS

由此测量检验,其实不仅仅是background,全部的间接通过chrome-extension://id/xx.html这种艺术展开的网页都得以随意跨域。

配置中,background能够经过page钦定一张网页,也足以因而scripts直白钦赐多少个JS,Chrome会自动为这几个JS生成三个暗中同意的网页:

{
    // 会一直常驻的后台JS或后台页面
    "background":
    {
        // 2种指定方式,如果指定JS,那么会自动生成一个背景页
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
}

亟待特意表明的是,尽管你能够透过chrome-extension://xxx/background.html直接打开后台页,不过你打开的后台页和确实直接在后台运行的不得了页面不是同一个,换句话说,你能够展开无数个background.html,不过的确在后台常驻的唯有多少个,并且那一个你长久看不到它的分界面,只好调节和测量检验它的代码。

在决定台用运转删除dom的代码,看完了最新的一章。外人用那些格局,也不必然会操作,所以,作者决定开辟一个chrome插件,并简单,倘使有一定的前端基础,开辟chrmoe插件分分钟的事。

5.6 injected-script

此处的injected-script是笔者给它取的,指的是通过DOM操作的点子向页面注入的一种JS。为何要把这种JS单独拿出去探讨吗?又大概说为何须要通过这种措施注入JS呢?

那是因为content-script有贰个十分大的“缺陷”,也便是不能访问页面中的JS,就算它能够操作DOM,可是DOM却不可能调用它,也正是无可奈何在DOM中通过绑定事件的法门调用content-script中的代码(蕴涵直接写onclick和addEventListener2种艺术都丰硕),但是,“在页面上增多贰个开关并调用插件的扩展API”是贰个很广阔的需求,那该怎么办吧?其实那正是本小节要讲的。

在content-script中通过DOM方式向页面注入inject-script代码示例:

// 向页面注入JS
function injectCustomJs(jsPath)
{
    jsPath = jsPath || 'js/inject.js';
    var temp = document.createElement('script');
    temp.setAttribute('type', 'text/javascript');
    // 获得的地址类似:chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
    temp.src = chrome.extension.getURL(jsPath);
    temp.onload = function()
    {
        // 放在页面不好看,执行完后移除掉
        this.parentNode.removeChild(this);
    };
    document.head.appendChild(temp);
}

您认为这么就行了?实行一下你会看出如下报错:

Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

乐趣正是您想要在web中央直属机关接访问插件中的财富的话不能够不出示声明才行,配置文件中扩大如下:

{
    // 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的
    "web_accessible_resources": ["js/inject.js"],
}

关于inject-script怎么着调用content-script中的代码,前面笔者会在特别的二个新闻通讯章节详细介绍。

2.怎么着查看其余插件的源码

拜候chrome://version 找到Chrome插件安装的本机目录:

必威 6chrome://version然后找到extension目录,全部插件和数量都在这里,能够任由参照他事他说加以考察其余插件源码。

event-pages

此地顺带介绍一下event-pages,它是多个怎么东西啊?鉴于background生命周期太长,长日子挂载后台恐怕会影响属性,所以谷歌(Google)又弄三个event-pages,在配备文件上,它与background的独一不一致就是多了二个persistent参数:

{
    "background":
    {
        "scripts": ["event-page.js"],
        "persistent": false
    },
}

它的生命周期是:在被亟需时加载,在悠闲时被关门,什么叫被须求时呢?比方第二遍安装、插件更新、有content-script向它发送消息,等等。

除却配置文件的变型,代码上也可以有一对细小变化,个人这几个大概驾驭一下就行了,日常景色下background也不会很费用品质的。

一个 Chrome 增添,其实正是一个安顿文件 manifest.json 和一多重HTML、CSS、JS、图片文件的见面,而文件之间的团组织,跟平时的web开垦一样。

5.7 homepage_url

开荒者可能插件主页设置,平时会在如下2个地方显得:

必威 7

此间输入图片的汇报

必威 8

这里输入图片的陈诉

3.不要把JS代码写在html文件里

出于安全思索,入口html文件中的JS代码只好通过script标签援引外界脚本文件,内嵌的JS代码会失效的。

popup

popup是点击browser_action或者page_actionLogo时展开的叁个小窗口网页,核心离开网页就及时关闭,平时用来做一些一时的并行。

微博网摘插件popup效果

popup可以满含自由你想要的HTML内容,何况会自适应大小。能够通过default_popup字段来钦命popup页面,也得以调用setPopup()方法。

安插形式:

{
    "browser_action":
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的标题,可选
        "default_title": "这是一个示例Chrome插件",
        "default_popup": "popup.html"
    }
}

image

急需非常注意的是,由于单击图标展开popup,宗旨离开又立刻关闭,所以popup页面包车型大巴生命周期平时十分的短,供给长日子运作的代码千万不要写在popup里面。

在权力上,它和background特别相近,它们中间最大的不一样是生命周期的分裂,popup中得以一贯通过chrome.extension.getBackgroundPage()获取background的window对象。

率先说manifest.json文件,那个文件是插件的陈述,至关重要,必得的字段唯有:name和version,别的字段遵照本人的顺序选拔。

6. Chrome插件的8种呈现情势

本文由必威发布于必威-编程,转载请注明出处:昨天我上某漫画网站必威:,即可快速开发一个

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。