完成一个简朴的chrome插件

2019年8月20日 219次阅读 来源: Harvey

我们在上网的时刻，都邑用到阅读器，然则阅读器并不是具有我们想要的一切功用，我们可以依据本身的须要，完成本身的插件来满足需求。比方网页中经常会有大批的广告，假如你愿望具有一个纯洁的网页，可以完成一个插件来删除网页中的广告部份，假如你以为阅读器自带的下载工具不太轻易，可完成一个插件来治理下载的一切文件，文本以完成一个纪录一切翻开的网页地点为例，分享一下对阅读器插件开辟的熟悉。

要完成一个阅读器插件，须要从一个设置文件最先，这个设置文件就是manifest.json文件，任何插件的完成都离不开这个JSON花样的文件。

初识manifest.json文件

  1. 设置基础信息

               "manifest_version": 2, // 文件版本，基础稳定
           "name": "Record Web Address Extension", // 这里输入插件称号
           "version": "1.0.1", // 本身完成的插件版本，在打包完插件的时刻，依据这个字段来推断插件是不是须要更新
           "description": "The first extension that yangyanjun made.", // 这里输入对此插件的细致描述 以上几个字段给插件增加一个进口。

  2. 设置进口信息

               "browser_action": { 
               "default_icon": "pinzhi_logo.png",
               "default_title": "纪录阅读地点", 
               "default_popup": "popup.html" 
            }
    • “browser_action” 字段设置好今后，插件加载后在阅读器的地点栏右边就会天生一个进口图标，如下图所示。
    • “default_icon”字段设置图标的地点，
    • “default_title”字段设置鼠标移到图标上显现的笔墨，
    • “default_popup”设置单击图标所实行的文件。

须要注重的是，这里的文件地点都是相对路径，相对于manifest.json文件。
《完成一个简朴的chrome插件》

3.设置此插件所能接见的阅读器权限

            "permissions": [ 
                "http://*/*",
                "https://*/*",
                "tabs",
                "storage"
            ]

“permissions”字段是一个数组，列出本插件所运用到的阅读器权限，假如这里没有受权，则插件是没法运用的。此插件用到的阅读器的权限。

4.设置插件背景页面。

    "background":{
        "page":"background.html"
    }

“background”字段表明插件所运转的环境，在阅读器前台看不到的页面，须要翻开扩大顺序的开辟者形式才看到。如下图所示：

《完成一个简朴的chrome插件》

5.设置对页面内容举行操纵的剧本

    "content_scripts": [{  //对页面内容举行操纵的剧本
         "matches": ["http://*/*","https://*/*"],  
         "js": ["js/jquery-1.9.1.min.js", "js/js.js"],
         "run_at": "document_start",  
         "all_frames": true
    }]

“matches”字段设置实行该剧本的环境，比方本插件的该剧本在http或https协定下才实行，在其他协定的网页中是不实行内容剧本的。
“js”字段顺次加载剧本文件地点。
“run_at”指定在document加载时实行该剧本

插件中几个环境的总结

  1. popup.html: 点击插件图标所显现的页面，只要点击图标才会显现，这可区分于background.html的运转周期。这个页面中运转的js剧本叫做popup.js，它会在每次点击插件进口图标时从新载入。 popup.html页面如下图所示：

  2. background.html: 这个页面是插件运转的背景页面，没有显现在窗口中，与当前阅读页面无关。这个页面存在于插件运转的全部周期。插件启动后就常驻背景，只要一个,这个页面运转的js剧本叫做background.js。
  3. content.js：这个是注入在web页面中的JavaScript剧本,可以是多个，如上所述，可以设置注入前提。

《完成一个简朴的chrome插件》

注重：chrome不允许扩大中的HTML页面内直接内嵌js剧本，请求一切的剧本都作为外部src来引入。

三个主要部份音讯通报总结

  • popup挪用background中变量或要领：

       let bgMessage = chrome.extension.getBackgroundPage(); //可直接猎取background页面
   console.log(bgMessage.tabUrl);  //直接挪用background的变量或要领。

  • background挪用popup中变量或要领：

       let popMessage = chrome.extension.getViews({type:'popup'});//可直接猎取popup页面
   console.log(popMessage[0].name); // 挪用第一个popup的变量或要领。

    注重： 因为个Extension可以同时具有若干个页面。这些页面分为五种范例为除了background和popup页面外，另有tab：像一般网页一样在阅读器的Tab中翻开的页面、infobar：在阅读器顶部信息栏显现的信息页面、notification：在阅读器底部显现的关照页面。它们离别代表在差别窗口翻开的页面。 所以这里一定要指定猎取页面的type范例，假如没有指定，则猎取Background Page以外的一切Extension Page的window对象。

  • 内容剧本发音讯给background

       chrome.runtime.sendMessage({conyent: message || '我是content-script'},
   function(response) {
           console.log('来自background的复兴：' + response);
       }
   );

  • background监听内容剧本所发送的音讯，并作出回应

       chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
   {
    ...
    sendResponse(JSON.stringify(request)); // 监听到音讯今后，对收到的音讯做一些处置惩罚并做出回应
   });

本插件完成的两个主要点

  1. 猎取当前tab页面的url

    这部份逻辑要写在background.js中，可以直接运用谷歌供应的插件接口来猎取当前页面的url
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    console.log(tab.url) //可以猎取当前页面的url地点
}）

  2. 将猎取的url地点存储起来

     可以运用谷歌的storage来存储，因为在manifest.json中已授与了storage权限，所以这里可以直接运用   
 chrome.storage.local.set({'address': tabUrl}, function() {
    console.log('success')
  } )

可以挑选同步的体式格局或许当地体式格局存储，若挑选前者(sync), 存储的数据会自动同步到你登录的任何Chrome阅读器。若挑选storage.local，则只可以将数据存储在当前登录的装备当地。细致用法可拜见 https://developer.chrome.com/…
《完成一个简朴的chrome插件》

加载调试

设置 —>拓展顺序—>加载已解压的拓展顺序—>挑选manifest.json地点的文件夹即可

《完成一个简朴的chrome插件》

注重：代码修正今后，须要从新加载文件。

小结

本文只是简朴分享了怎样开辟一个简朴的谷歌阅读器插件，以及一些注重事项，而且提到了怎样受权和运用谷歌插件api，重点引见了插件开辟必备的manifest.json进口文件和插件中几个主要环境以及环境之间的通讯。本文内容并不是很周全，就当是chrome插件开辟的进修笔记，不足之处还望指出。本文内容并未结束，在今后进修的过程当中，会不停补充。

参考资料：
https://developer.chrome.com/…
https://developer.chrome.com/…
https://blog.csdn.net/luoshen…

    原文作者：Harvey
    原文地址: https://segmentfault.com/a/1190000017315643
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞