【chrome 插件一】开辟一个简朴chrome浏览器插件

2019年8月30日 288次阅读 来源: 崔小拽

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，文件目次以下
《【chrome 插件一】开辟一个简朴chrome浏览器插件》
和一般的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 文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>just for test</title>
</head>
<body>
<h3>test</h3>
</body>
</html>

运转插件

chrome 中输入：chrome://extensions
挑选加载已解压的插件-》挑选文件根目次即可。
结果以下：

《【chrome 插件一】开辟一个简朴chrome浏览器插件》
一个基础的插件变完成了，勾选已启用，随意翻开一个网页，会看到log中输出以下

《【chrome 插件一】开辟一个简朴chrome浏览器插件》

点击页面上面的小图标以下图：
《【chrome 插件一】开辟一个简朴chrome浏览器插件》

优化发起

一个小的插件已完成，然则另有更多的api和风趣的事变能够去做。下面是360文档中给出一些优化发起，共勉。

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

  • 确认你的图标尺寸只管占满19×19的像素空间。 Browser action 的图标应当看起来比page action的图标更大更重。

  • 只管运用alpha通道而且柔滑你的图标边沿，由于许多用户运用themes，你的图标应当在在种种背景下都表现不错。不要不断的闪烁你的图标，这很引人恶感。

【转载请说明：【chrome 插件一】开辟一个简朴chrome浏览器插件 | 靠谱崔小拽 】

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