阅读 8196
10分钟入门chrome(谷歌)浏览器插件开发

10分钟入门chrome(谷歌)浏览器插件开发

整理chrome插件有哪些能力,插件开发入门,整理文档。

chrome谷歌浏览器插件开发,听上去很高大上,其实只要熟悉HTML、CSS、JS即可开发,插件也是将html页面渲染出来并执行js脚本而已。

插件能做哪些事?

  • 书签控制;
  • 下载控制;
  • 窗口控制;
  • 标签控制;
  • 网络请求控制,
  • 各类事件监听;
  • 自定义原生菜单;
  • 完善的通信机制;

简介

扩展程序主要名词

  • Manifest (清单文件)
  • Background Script (后台脚本)
  • UI Elements (页面元素)
  • Content Script (内容脚本)
  • Options Page(配置页面)

开发入门

1. 新建一个文件夹,目录结构如下:

chrome-plugin-demo
├── background.js
├── images
│   ├── 128.png
│   ├── 16.png
│   ├── 32.png
│   └── 48.png
├── manifest.json
├── popup.html
└── popup.js
复制代码

2. 创建 manifest.json 配置文件

{
    "name": "chrome-plugin-demo",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2 // 注意这个必须写2
}
复制代码

3. 创建 popup.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content{color: red;}
    </style>
</head>
<body>
    <h1>chrome-plugin-test</h1>
    <p id="content"></p>
    <script src="popup.js"></script>
</body>
</html>
复制代码

4. 创建 popup.js 文件

document.getElementById('content').innerText = 'Hello world!';
复制代码

5. 在 chrome 中安装扩展

  • 谷歌浏览器右上角: 更多按钮 -> 更多工具 -> 扩展程序
  • 点击加载已解压的扩展程序,选择刚创建的文件夹
  • 点开谷歌浏览器右上角的拼图图标即可看到你的插件。

好用的插件推荐

当前浏览的网页链接变成二维码

想在手机上看电脑访问的链接,不需要手动敲或者复制链接通过QQ等工具转发到手机上,仅需这个插件就可以扫二维码访问。

ColorZilla(网页颜色吸取器)

可吸取网页的字体、背景、元素等的颜色值

Markdown Preview Plus(可视化markdown)

可选主题,支持自定义css主题

json-viewer(可视化json)

可选主题,支持自定义css主题,可收缩展开,可编辑

JavaScript and CSS Code Beautifier(可视化js、css)

可选主题,支持自定义css主题

更多请参考

文章分类
前端
文章标签