【chrome 插件一】开发一个简单chrome浏览器插件

MiracleWong 发布于2019-08-19 18:07 / 1827人阅读

摘要：之所以越来越好用，很大一部分原因归功于功能丰富的插件对于忠实用户来说，了解和开发一款适合自己的插件，确实是一件很的事情。

chrome 之所以越来越好用，很大一部分原因归功于功能丰富的插件；对于chrome忠实用户来说，了解和开发一款适合自己的chrome插件，确实是一件很cool的事情。

了解chrome 插件

chrome 插件个人理解：就是一个html + js +css + image的一个web应用；不同于普通的web应用，chrome插件除了兼容普通的js，json，h5等api，还可以调用一些浏览器级别的api，例如收藏夹，历史记录等。

推荐两个网站了解和入门
谷歌官方API：https://developer.chrome.com/extensions/getstarted
360的文档：http://open.chrome.360.cn/extension_dev/overview.html

开始写第一个插件 文件结构

一个简单的demo，文件目录如下

和普通的web文件没有什么区别，简单介绍下

html:存放html页面

js :存放js

locales ：存放了一个多语言的兼容【可无】

image ：放了两张图片【初期图标】

manifest ：核心入口文件

写一个manifest

api参考文档 :http://open.chrome.360.cn/extension_dev/manifest.html

直接上代码：

{
  "name": "hijack analyse plug",
  "version": "0.0.1",
  "manifest_version": 2,

  // 简单描述
  "description": "chrome plug analyse and guard the http hijack",
  "icons": {
    "16": "image/icon16.png",
    "48": "image/icon48.png"
  },
  // 选择默认语言
  "default_locale": "en",

  // 浏览器小图表部分
  "browser_action": {
    "default_title": "反劫持",
    "default_icon": "image/icon16.png",
    "default_popup": "html/test.html"
  },

  // 引入一个脚本
  "content_scripts": [
    {
      "js": ["script/test.js"],
      // 在什么情况下使用该脚本
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      // 什么情况下运行【文档加载开始】
      "run_at": "document_start"
    }
  ],
  // 应用协议页面
  "permissions": [
    "http://*/*",
    "https://*/*"
  ]
}

test.js 文件

/**
 * @author: cuixiaohuan
 * Date: 16/4/13
 * Time: 下午8:41
 */
(function(){
    /**
     * just test for run by self
     */
    console.log("begin");
})();

test.html 文件




    
    just for test


test

运行插件

chrome 中输入：chrome://extensions
选择加载已解压的插件-》选择文件根目录即可。
效果如下：

一个基本的插件变完成了，勾选已启用，随便打开一个网页，会看到log中输出如下

点击页面上面的小图标如下图：

优化建议

一个小的插件已经完成，但是还有更多的api和有趣的事情可以去做。下面是360文档中给出一些优化建议，共勉。

确认 Browser actions 只使用在大多数网站都有功能需求的场景下。确认 Browser actions 没有使用在少数网页才有功能的场景，此场景请使用page actions。

确认你的图标尺寸尽量占满19x19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。

尽量使用alpha通道并且柔滑你的图标边缘，因为很多用户使用themes，你的图标应该在在各种背景下都表现不错。不要不停的闪动你的图标，这很惹人反感。

【转载请注明：【chrome 插件一】开发一个简单chrome浏览器插件 | 靠谱崔小拽】

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

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

程序员的修行-《1.高效chrome插件》

摘要：本文作者原文地址前言浏览器无论是作为浏览器市场的还是其强大的跨平台能力以及丰富的扩展插件，一直是许多开发者的首要选择的浏览器。浏览器也因为其丰富的插件，帮助开发者们在开发流程中极大地提高开发效率。本文作者：TheBeauty原文地址:https://www.cnblogs.com/thebe... 前言 Chrome浏览器无论是作为浏览器市场的NO1还是其强大的跨平台能力以及丰富的...

Chiclaim 2019-08-16 13:25 评论0 收藏0
程序员的修行-《1.高效chrome插件》

摘要：本文作者原文地址前言浏览器无论是作为浏览器市场的还是其强大的跨平台能力以及丰富的扩展插件，一直是许多开发者的首要选择的浏览器。浏览器也因为其丰富的插件，帮助开发者们在开发流程中极大地提高开发效率。本文作者：TheBeauty原文地址:https://www.cnblogs.com/thebe... 前言 Chrome浏览器无论是作为浏览器市场的NO1还是其强大的跨平台能力以及丰富的...

nanchen2251 2019-08-23 12:22 评论0 收藏0
Chrome 扩展开发——编写一个自己的浏览器插件

摘要：配置文件每一个扩展都有一个格式的文件，叫。此消息发送后会触发扩展内每个页面的事件。和持续长时间的保持会话需要在和扩展建立一个长时间存在的通道。内容脚本发送消息到扩展程序建立通道，并给通道命名利用通道发送一条消息。这次的练习是做一个Chrome的扩展，分享一下入门开发过程。因为在消息传递那块纠结了特别久，所以我会重点总结消息传递那块。这次做这个插件的功能很简单，就是点击按钮后可以对当...

SunZhaopeng 2019-08-20 11:09 评论0 收藏0
从开发 2 个 Chrome 插件中学到的（对新手的 4 个提示和 6 个技巧）

摘要：提示插件可以重写默认的比如打开新时。这是在插件中定义的，因此不能后面做更改。把你的插件提交到的子版块中。从图中蓝色点开始到后面的两天曲线变化。曲线中间的那个小凸起，是二月份在发布的时候产生的。关于在插件中如何使用的教程在这里。 showImg(https://segmentfault.com/img/remote/1460000008971998?w=1920&h=1080); 本文...

20171112 2019-08-20 15:37 评论0 收藏0
一个简单的chrome拓展程序开发

摘要：相当于发一个命令。这个函数能获取到当前标签的信息对象并传递给回调函数。向标签页中的发送消息。接收到消息，执行操作。会弹出一个控制台。这样我们就完成了一个简单的插件。最近突然觉得有些常用的功能可以写成浏览器插件，就不用把代码放到console控制台运行了。只要点击插件图标就可以自动运行。会方便很多。就去查了下chrome插件开发教程。本质上讲，chrome插件就是以一些特殊的方式运行一...

vslam 2019-08-20 12:23 评论0 收藏0