当前位置：网站首页>10分钟带你入门chrome(谷歌)浏览器插件开发

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

2022-08-03 08:15:00 【Bejpse】

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

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

原网站

版权声明
本文为[Bejpse]所创，转载请带上原文链接，感谢
https://blog.csdn.net/Bejpse/article/details/126095611

边栏推荐

猜你喜欢

随机推荐