chrome扩展工具开发笔记

Posted 2021-04-28 web前端工作者

参考文献：

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：接收数据之后，展现到页面之中，我们可以清晰的看到

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. 

2. 
   

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

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

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

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

添加自己的扩展工具

步骤：

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

2. 选择程序的根目录

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

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

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

调试

popup.html和popup.js调试

1.点击icon

2.在弹窗空白处右键

3.点击检查

2.调试content_script.js

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

mainfest.json的content_scripts属性引入的

 

"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"],
 

                      }