admin管理员组

文章数量:1530842

概述

学习目标：如何开发一个简单的浏览器插件。

学习前提：HTML、CSS、JavaScript基础

官方文档：http://chrome.cenchy

入门

其实跟着官方的说明文档就能很快入门，而且是中文文档。

第一步，在电脑本地的任意位置创建一个文件夹，名为HelloWorld，也可以叫其他名字。

第二步，在HelloWorld文件夹下创建一个名为manifest.json的文件，必须叫这个名字。内容如下：

{
  "manifest_version": 2,

  "name": "HelloWorld",
  "description": "这是一个谷歌浏览器的入门插件",
  "version": "1.0",

  "permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "hello.html"
  }
}

 关于该文件的参数更详细的说明请参考官网：http://chrome.cenchy/manifest.html

必须的字段只有：name和version。

接着我们找一个png格式的图标，放到HelloWorld目录下，并且重命名为icon.png，正是上面配置的default_icon参数的值。（注：也可以从阿里巴巴矢量图标库下载一个https://www.iconfont/search/index?searchType=icon&q=hello）

在browser_action参数中还配置了一个default_popup参数，默认显示的HTML页面，我们在HelloWorld目录下创建一个名为hello.html，页面内容很简单，只显示一个HelloWorld就可以了，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

到此，一个简单的谷歌浏览器插件就做好了。

第三步，打开谷歌浏览器，加载我们写的插件。

打开“扩展程序”

 进入开发者模式

 点击“加载已解压的扩展程序”，选择“HelloWorld”文件夹

 就可以看到我们自己定义的插件了

 在浏览器的标签栏上能看到icon.png的小图标

 点击该图标，就可以运行该插件了。

到此，完成插件的开发。

对于一些API的获取请参考谷歌浏览器的官方文档，并且官方文档中有很多代码示例，可以参考。至于更复杂的功能，更美观的界面，就需要HTML、CSS、JavaScript一起发力了。

在浏览器插件所在的目录下同样可以使用JavaScript等的API。

本项目源码地址：GitHub的Demo

本文标签： 入门浏览器插件

版权声明：本文标题：编写谷歌浏览器插件入门 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725901736a1048248.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。