当前位置：网站首页>10 minutes to get you started chrome (Google) browser plug-in development

10 minutes to get you started chrome (Google) browser plug-in development

2022-08-03 08:32: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://yzsam.com/2022/215/202208030815177802.html

边栏推荐

猜你喜欢

随机推荐