当前位置: Chrome插件首页 > Chrome插件问答 > 怎么样去开发一个简单的chrome浏览器插件

怎么样去开发一个简单的chrome浏览器插件

Chrome插件问答
chrome插件网推荐了很多优秀的chrome插件,chrome浏览器之所以越来越好用,很大一部分原因归功于功能丰富的插件。最近有朋友问小编怎么去了解和开发一款适合自己的chrome插件呢?听起

chrome插件网推荐了很多优秀的chrome插件,chrome浏览器之所以越来越好用,很大一部分原因归功于功能丰富的插件。最近有朋友问小编怎么去了解和开发一款适合自己的chrome插件呢?听起来是一件很炫的事情,今天我就来简单聊一聊怎么样开发一款简单的chrome插件

怎么开发chrome 插件?

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

下面我们开始写第一个插件

文件结构

一个简单的demo,文件目录如下
文件结构

 

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

  • html:存放html页面

  • js :存放js

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

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

  • manifest :核心入口文件

写一个manifest

直接上代码:

{
  "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

选择加载已解压的插件-》选择文件根目录即可。

效果如下:
扩展插件

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

 

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


安装成功

优化建议

 

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

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

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

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

相关内容推荐

Block site:屏蔽指定网站并自动跳转

办公插件 2017-03-06 22:20:53

Block site是一款可以自动阻止访问您指定的网站和关键词,并且将所有指向阻止网站的超链接无效化,从而使其无法点击的chrome扩展插件。在插件选项中添加一个你想要屏蔽的网站地址,

Todoist: 待办事项列表及任务管理器

办公插件 2017-06-08 14:36:11

Todoist是网上领先的待办事项列表和任务管理器。我们管理数以百万计的待办事项,我们已经准备好来管理你的!
这种时髦的待办事项应用程序不断,你组织,突出重点,提高工作效

Google Input Tools

办公插件 2020-04-05 01:22:43

Google Input Tools 是谷歌推出的一个Chrome扩展,旨在在Web浏览器中输入时提供多种语言支持。

网页阅读模式插件-iReader

新闻天气插件 2017-05-08 21:43:15

IReader是一个浏览器插件,可不是苹果那个作为阅读器的 iReader 哦,可以将页面中的正文以小清新的风格突出显示,让你免受其他元素的干扰,专注于内容。

历史上的今天chrome浏览器插件

新闻天气插件 2016-12-05 11:35:43

《历史上的今天》官网又推出了新的客户端,这次是针对Chrome核心(Blink内核)的浏览器推出的一个应用扩展,国内用户习惯称为 chrome插件 。现在浏览器市场Chrome核心占据主流,360极速浏

chrome://plugins 为什么无法打开?

Chrome插件百科 2018-03-02 13:34:13

最后又很多网友在我们 chrome插件 网反应说chrome://plugins 无法打开,在chrome标签页输入chrome://plugins提示如下页面: 其次chrome://plugins 无法打开已经有一段时间了。因为从谷歌官方的博客