搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > web前端工作者 > chrome扩展工具开发笔记

chrome扩展工具开发笔记

web前端工作者 2018-02-28

参考文献:


chrome官方文档(需要翻墙):

https://developer.chrome.com/extensions/getstarted

360提供的文档:http://open.chrome.360.cn/extension_dev/overview.html

大神文档:http://www.cnblogs.com/guogangj/p/3235703.html

提示:

1.要开发chrome扩展工具,首先得有html,css,js的基础

2.建议多看几个demo,对照着文档研究一会,就可以写出一个小demo



官方demo

 下载demo

这个demo是官方提供的一个书签功能

展示效果:



开发:

常用文件用途


1.一般需要几个文件,分别解释一下什么用途

  • icon:加载扩展工具之后,浏览器上面显示的icon,一般尺寸是19px

  • manifest:设置扩展工具的名字,版本等,必不可少

  • popup.html:点击icon之后弹出的页面

  • popup.js:控制popup.html的js

  • background.js:用来沟通我们popup页面和线上页面

  • content.js:用来操作线上的页面

详细解释:

  • popup.js是弹出的那个页面用的js。假如在弹出的页面引用了document.getElement.ById().则 他获取的是popup.html页面的内容。而不是当前页的。popup.js所作用的范围就是popup.

  • background.js:顾名思义,他是一个后台的js,在任何页面都可以调用。他主要的作用就是调度及与我们的后台发送ajax请求等。通过bk.js给popup/content来发送信息。操作tab以及做一些监听等操作。

  • content_script.js:是页面中的js,也就是tab中的js。

三个文件的沟通机制举例:

content_script.js (操作线上页面)  通过sendMessage发送查找的数组给background.js

background.js 通过onmessage接收数据,而且监听数据,一旦数据发生变化立马传递给popup.js

popup.js:接收数据之后,展现到页面之中,我们可以清晰的看到

chrome扩展工具开发笔记

chrome扩展工具开发笔记

chrome扩展工具开发笔记

manifest文件解释

{

  "name": "应用名字",

  "version": "1.1",

  "description": "应用描述",

  "permissions": [

    "tabs"

  ],

  "browser_action": {

      "default_title": "鼠标放到icon上面显示的文字",

      "default_icon": "icon.png",

      "default_popup": "popup.html"

  },

  "manifest_version": 2,

  "background": {

        "scripts": ["js/jquery.min.js","content_script.js"]

    }

}

1. 基本属性

包括扩展的名称(name)、版本(version)、描述(description)、图标位置(icons)和 manifest 版本(manifest_version)等信息。

其中:name、version 和 manifest_version 是必须的,而且 manifest_version 必须为 2


2. browser_action

browser_action 指定扩展的图标放在 Chrome 工具栏中,它定义了扩展图标文件位置(default_icon)、悬浮提示(default_title)和点击扩展图标所显示的页面位置(default_popup)。


3. permissions

permissions 属性是一个数组,它定义了扩展需要向 Chrome 申请的权限

要使用视窗 API,你必须在manifest.json声明"tabs"的权限 。例如:

{
  "name": "My extension",
  ...  "permissions": ["tabs"],
  ...
}
4.background
background 往线上页面注入自己写的,用来操作线上页面的js,css文件



图标在特定的页面出现,其他页面隐藏 效果的实现代码

background.js:




function getDomainFromUrl(url){

    var host = "null";

    if(typeof url == "undefined" || null == url)

        url = window.location.href;

    var regex = /.*\:\/\/([^\/]*).*/;

    var match = url.match(regex);

    if(typeof match != "undefined" && null != match)

        host = match[1];

    return host;

}

function checkForValidUrl(tabId, changeInfo, tab) {

    if(getDomainFromUrl(tab.url).toLowerCase()=="www.liubai.shop"){

        chrome.pageAction.show(tabId);

    }

};

chrome.tabs.onUpdated.addListener(checkForValidUrl);


manifest.json


{

    "manifest_version": 2,

    "name": "600购物优惠网",

    "version": "1.0.1",

    "background": { "scripts": ["jquery.min.js", "background.js"] },

    "page_action": {

        "default_icon": {

            "19": "icon19.png",

            "38": "icon.png"

        },

        "default_title": "600购物优惠网", 

        "default_popup": "popup.html"

    },

    "permissions" : ["tabs"],

    "content_scripts":[{

        "matches":["http://www.liubai.shop/*"],

        "js":["jquery.min.js", "content_script.js"]

    }]

}

文档解释:

age Action类型的Google Chrome浏览器扩展程序,通常也会有一个图标,但这个图标位于Chrome浏览器的地址栏内右端

而且这个图标并非始终出现,而是当某指定的页面打开时才会出现。

也就是说,这个图标与当前打开的页面有关,只有打开了指定的页面才会显示该图标,对该页面执行对应的操作。

定义Page Action类型的Google Chrome扩展程序,首先要在manifest.json文件中注册如下:

{
        ...
        "page_action": {
          "default_icon": {                    // optional
            "19": "images/icon19.png",           // optional
            "38": "images/icon38.png"            // optional
          },
          "default_title": "Google Mail",      // optional; shown in tooltip
          "default_popup": "popup.html"        // optional
        },
        ...
      }

对于Page Action类型的Google Chrome扩展程序,其图标、提示、弹出框都类似于Browser Action。

Page Action没有徽章,但是有显示或隐藏的变化。默认Page Action是隐藏的,必须指定打开什么样的tab时显示Page Action的图标。

控制Page Action的图标显示使用chrome.pageAction.show(integer tabId)方法。

控制Page Action的图标隐藏使用chrome.pageAction.hide(integer tabId)方法。



生成扩展工具

步骤:

  1. 在浏览器中输入 chrome://extensions/  

  2. 勾选"开发者模式"

  3. 点击"打包扩展程序"

  4. 选择代码的根目录,然后点击"打包扩展程序"

  5. 之后在根目录生成两个文件:crx--扩展工具,pem-密钥文件

详细图文步骤如下:


1.在浏览器中输入 chrome://extensions/  

2.勾选"开发者模式"

  1. chrome扩展工具开发笔记


3.点击"打包扩展程序"

4.选择代码的根目录,然后点击"打包扩展程序"

chrome扩展工具开发笔记


5.之后在根目录生成两个文件:crx--扩展工具,pem-密钥文件

chrome扩展工具开发笔记


6.如果说指定扩展程序的私有密钥已经存在,那就去把根目录的pem文件删除掉即可

chrome扩展工具开发笔记



添加自己的扩展工具

步骤:

  1. 点击"加载已解压的扩展程序"

  2. 选择程序的根目录

  3. 点击右上角自己的图标,就可以看到自己写的页面


chrome扩展工具开发笔记

提示:如果直接把生成crx文件拖入浏览器,可能会出现此扩展程序可能已损坏。

所以建议按着上面的步骤进行

chrome扩展工具开发笔记


调试

popup.html和popup.js调试

1.点击icon

2.在弹窗空白处右键

3.点击检查

chrome扩展工具开发笔记

2.调试content_script.js


在 线上 页面空白处右键,点击检查,Sources - Content Scripts  - 就可以看到自己的扩展工具名字 ,点开,里面的文件就是通过

mainfest.json的content_scripts属性引入的

chrome扩展工具开发笔记
 

"content_scripts":[{
     "matches":["http://www.cnblogs.com/*"],
      "js":["jquery-2.0.0.min.js", "content_script.js"]
 }]

调试background.js


在 chrome://extensions/ 页面,找到自己的扩展程序,点击背景页,
 

会弹出一个开发人员工具,然后点击Sources ----   Netword  ---- 可以看到里面的文件
 

jquery.min.js 和 background.js是通过manifest.json中的background属性引入的

                   
                    "background":{
 

                         "script":["jquery.min.js","background.js"],
 

                      }

 
chrome扩展工具开发笔记



 

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《chrome扩展工具开发笔记》的版权归原作者「web前端工作者」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注web前端工作者微信公众号

web前端工作者微信公众号:mzmy1105

web前端工作者

手机扫描上方二维码即可关注web前端工作者微信公众号

web前端工作者最新文章

精品公众号随机推荐