实现一个简单的chrome插件

rubyshen 发布于2019-08-23 13:58 / 1099人阅读

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。

我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网页中的广告部分，如果你觉得浏览器自带的下载工具不太方便，可实现一个插件来管理下载的所有文件，文本以实现一个记录所有打开的网页地址为例，分享一下对浏览器插件开发的认识。

要实现一个浏览器插件，需要从一个配置文件开始，这个配置文件就是manifest.json文件，任何插件的实现都离不开这个JSON格式的文件。

初识manifest.json文件

设置基本信息

           "manifest_version": 2, // 文件版本，基本不变
           "name": "Record Web Address Extension", // 这里输入插件名称
           "version": "1.0.1", // 自己实现的插件版本，在打包完插件的时候，根据这个字段来判断插件是否需要更新
           "description": "The first extension that yangyanjun made.", // 这里输入对此插件的详细描述 以上几个字段给插件添加一个入口。

设置入口信息

           "browser_action": { 
               "default_icon": "pinzhi_logo.png",
               "default_title": "记录浏览地址", 
               "default_popup": "popup.html" 
            }

"browser_action" 字段配置好之后，插件加载后在浏览器的地址栏右侧就会生成一个入口图标，如下图所示。

"default_icon"字段配置图标的地址，

"default_title"字段配置鼠标移到图标上显示的文字，

"default_popup"配置单击图标所执行的文件。

需要注意的是，这里的文件地址都是相对路径，相对于manifest.json文件。

3.设置此插件所能访问的浏览器权限

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

"permissions"字段是一个数组，列出本插件所使用到的浏览器权限，如果这里没有授权，则插件是无法使用的。此插件用到的浏览器的权限。

4.设置插件后台页面。

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

"background"字段表明插件所运行的环境，在浏览器前台看不到的页面，需要打开扩展程序的开发者模式才能看到。如下图所示：

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加载时执行该脚本

插件中几个环境的总结

popup.html: 点击插件图标所显示的页面，只有点击图标才会显示，这可区别于background.html的运行周期。这个页面中运行的js脚本叫做popup.js，它会在每次点击插件入口图标时重新载入。 popup.html页面如下图所示：

background.html: 这个页面是插件运行的后台页面，没有显示在窗口中，与当前浏览页面无关。这个页面存在于插件运行的整个周期。插件启动后就常驻后台，只有一个,这个页面运行的js脚本叫做background.js。

content.js：这个是注入在web页面中的JavaScript脚本,可以是多个，如上所述，可以设置注入条件。

注意：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)); // 监听到消息之后，对收到的消息做一些处理并做出回应
   });

本插件实现的两个重要点

获取当前tab页面的url

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

将获取的url地址存储起来

 可以使用谷歌的storage来存储，由于在manifest.json中已经授予了storage权限，所以这里可以直接使用   
 chrome.storage.local.set({"address": tabUrl}, function() {
    console.log("success")
  } )

可以选择同步的方式或者本地方式存储，若选择前者(sync), 存储的数据会自动同步到你登录的任何Chrome浏览器。若选择storage.local，则只能够将数据存储在当前登录的设备本地。详细用法可参见 https://developer.chrome.com/...

加载调试

设置 —>拓展程序—>加载已解压的拓展程序—>选择manifest.json所在的文件夹即可

注意：代码修改之后，需要重新加载文件。

小结

本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件api，重点介绍了插件开发必备的manifest.json入口文件和插件中几个重要环境以及环境之间的通信。本文内容并不是很全面，就当是chrome插件开发的学习笔记，不足之处还望指出。本文内容并未完结，在以后学习的过程中，会不断补充。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99853.html

实现一个简单的chrome插件

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网...

lieeps 2019-08-02 12:12 评论0 收藏0
实现一个简单的chrome插件

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网...

fjcgreat 2019-08-29 17:31 评论0 收藏0
Chrome插件开发入门：如何实现一键上班赖皮

摘要：老板查岗时，一个快捷键，立即关闭所有赖皮页面。上传，发布插件。从零开始，开发简单的一键赖皮插件的上班族都在使用浏览器赖皮，所以我们选择采用插件来实现功能。很多人介绍过Chrome插件，但必须要说，插件开发就是摆弄一个小玩具，第一要素是实用，其次是好玩。单纯罗列各种功能是非常无趣的。所以把一篇旧文拿出来与大家分享。人，活着就是为了赖皮。作为一个合格的开发人员，把30%的时间用...

acrazing 2019-08-23 14:05 评论0 收藏0
使用LeanCloud服务做一站式Chrome插件开发——Favorite Image

摘要：云存储问题，帐号系统，多端同步最开始只想做浏览器本地的存储，使用提供的存在本地就。具体解决方案云存储及帐号系统使用提供的存储服务解决。 0. 目录要开发的是什么项目 1.1 想法开端 1.2 应该有什么功能? 开发需要解决的核心问题具体解决方案 3.1 帐号系统 3.2 存储服务 3.3 使用`LeanEngine`做反防盗链中转接口 3.4 Chrome 插件实现对去...

JohnLui 2019-08-20 14:06 评论0 收藏0
五分钟实现一个chrome插件(含源码)

摘要：找了一下网上应用商店，其实已经有很多款类似插件，但往往太过陈旧或者性能较差，不能够满足个人需求，估自己捣鼓了一个插件。代码已经在github更新了 https://github.com/abc-club/c... 请移步github。另外喜欢的话请star。求star求star求star 本文已同步到 https://github.com/abc-club/f... 背景很多网站都...

mengbo 2019-08-26 10:59 评论0 收藏0