谷歌浏览器插件开发

最新推荐文章于 2024-06-03 18:52:53 发布

enginecode

最新推荐文章于 2024-06-03 18:52:53 发布

阅读量922

点赞数 1

分类专栏： chrome扩展文章标签： chrome javascript 前端

本文链接：https://blog.csdn.net/lucaoyun/article/details/108411865

版权

chrome扩展专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本篇是浏览器扩展系列的第一篇。

技术介绍

开发者可以通过浏览器扩展（Chrome extension）定制自己的专属浏览器。

每个扩展程序其实是一个.crx格式的压缩文件，该压缩文件基于常规的web技术（例如HTML, JavaScript和CSS）构建。

开发原则

单一目的；
界面尽量少。

结构规范

Project/
  |- src/
    |- assets/ 静态资源
      |- images/
      |- styles/
      |- scripts/
    |- options/ 用户选项
      |- index.html
      |- index.js
    |- browser_action/ 浏览器行为
      |- index.html
      |- index.js
    |- background/ 后台任务
      |- index.js
    |- content_scripts/ 页面脚本
      |- index.js
  |- manifest.json 权限声明

Hello World

我们以一个Hello World扩展开始定制之旅。

manifest.json

manifest.json文件是每个扩展的标配。

{
  "name": "Hello World",
  "description" : "从Hello World开始扩展",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

hello.html

当用户点击manifest.json文件中定义的browser_action图标（hello_extensions.png）时，将展示hello.html文件,这是一个简易的html文件。

<html>
    <body>
      <h1>Hello World</h1>
    </body>
  </html>

运行

通过以上两个步骤，一个功能简单的扩展已经开发完成😊。接下来，可以加载该扩展进行试运行。

在chrome地址栏输chrome://extensions，回车即可进入扩展管理界面；
打开开发者模式；
点击加载已解压的扩展程序，选择你的开发目录即可安装完成。

这时，在浏览器右上角应该能看到manifest.json文件中配置的图标了。

源码及更多资料

浏览器扩展开发

enginecode

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
谷歌浏览器插件开发

本篇是浏览器扩展系列的第一篇。技术介绍开发者可以通过浏览器扩展（Chrome extension）定制自己的专属浏览器。每个扩展程序其实是一个.crx格式的压缩文件，该压缩文件基于常规的web技术（例如HTML, JavaScript和CSS）构建。开发原则单一目的；界面尽量少。结构规范Project/ |- src/ |- assets/ 静态资源 |- images/ |- styles/ |- scripts/ |- op.
复制链接

扫一扫