整理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主题

# webview # chrome # javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

如何基于香橙派AIpro对视频/图像数据进行预处理？

avatar 华为云开发者联盟
cover

HAS2024：华为云以系统性创新加速千行万业智能化升级

avatar 华为云开发者联盟
cover

数仓的两种轻量级数据交换格式：json与jsonb

avatar 华为云开发者联盟