一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

浏览器插件(Browser Extension)开发教程一之入门

1.引言

今天是2023的最后一天,相信过很多小伙伴都去体验人挤人的快乐去了,博主不想被踩成猪脚,但待在家里又清闲无所事事。思来想去决定分享一些自己近来学到的干货。一方面是为了巩固已学的内容和提升自己,另一方面也希望我的分享能给将要接触的小伙伴一些帮助和裨益。

很多前端同学可能都没有听说过浏览器插件,也不知道浏览器插件是干什么的,博主以前听到也是满脸的问号。今年因为AI爆火的缘故,公司为了跟上时代的步伐,避免被新技术的浪潮洗刷掉,老总决定开发一款AI产品,主要涉及APP端和插件(运行在浏览器内的WEB项目,神似微信小程序)。目前两款产品都上线了,APP的全球下载量已超十万+,浏览器插件因为是小众产品,目前有一万+用户。但蚊子腿也是肉嘛,浏览器插件还是有市场的,只要你有想法,一切皆有可能。拿今年爆火的AI插件,某些上架短短半年就积累了一百多万用户,博主本人也是他们的白嫖党之一,哈哈。所以想学浏览器插件开发的同学赶紧行动起来,这个赛道国内开发者进入的还非常少,想让我更新的小伙伴:记得收藏支持点赞,这是我持续更新最大的动力哦!

2.总体规划

  1. Chrome官方常用的基础知识(基于MV3)
  2. 国际的主流插件开发文档(讲解和翻译)
  3. 真实案例实践
  4. 源码分享

3.起步

3.1 新建一个文件夹(chrome-extension),文件夹下创建一个名叫manifest.json的文件,如下

浏览器插件(Browser Extension)开发教程一之入门

3.2 在manifest.json中编写js代码

manifest是一个配置文件,包含插件的基础信息和一些功能配置清单,如下配置描述了插件的版本,现在都是3。name是插件的名称,description用来简要说明你的插件是干什么的,version用来描述你自己发布的插件的版本,这些都要写,在插件上架到谷歌浏览器商店的时候要用。

{
  "manifest_version":3,
  "name":"first extension",
  "description":"a wonderful extension",
  "version":"1.0.0"
}

3.3加载本地的程序到谷歌浏览器

前面已经写好了一个最简单的插件项目,现在我们尝试将项目加载到浏览器里面

  • 打开浏览器,在顶部的地址栏输入:chrome://extensions
  • 找到页面的开发者模式:打开选择开关按钮
  • 点击:加载已解压的扩展程序,选择文件夹,也就是chrome-extension目录,至此一个最简单的插件已经完成。

浏览器插件(Browser Extension)开发教程一之入门

3.4 如何将插件固定到浏览器右侧界面

浏览器插件(Browser Extension)开发教程一之入门

3.5 如何在点击图标时打开弹窗页面

在manifest文件下新增代码aciton,action用来声明扩展程序图标的图片,以及当用户点击扩展程序的图标时,弹出窗口显示的 HTML 页面,目录结构如下:

浏览器插件(Browser Extension)开发教程一之入门

修改manifest文件的代码:

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

新增一个hello.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>
</head>
<body>
  <h1>Hello Extensions</h1>
</body>
</html>

重新加载资源

浏览器插件(Browser Extension)开发教程一之入门

浏览器插件(Browser Extension)开发教程一之入门

右上角的图标已变成我们自己换的图标了,点击这个图标会显示html的内容,到这里一个显示弹出窗口的功能就完成了。

浏览器插件(Browser Extension)开发教程一之入门

4.如何在浏览器网页上运行JS脚本代码

在manifest中声明js脚本,新增content-scripts,以下代码表示,我们要在百度的网址下面注入一个叫content.js的脚本代码。

{
  "manifest_version":3,
  "name":"first extension",
  "description":"a wonderful extension",
  "version":"1.0.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://www.baidu.com/"
      ]
    }
  ]
}

根目录下创建scripts目录,在此目录下新建content.js文件

// scripts/content.js
const bdSearch = document.querySelector("#form");
bdSearch.remove()

然后我们打开浏览器,重新加载修改后的插件,此时刷新百度的主页面,你会发现神奇的一幕,百度的搜索框不见了,因为我们写了js逻辑,将百度的搜索框删除了。

浏览器插件(Browser Extension)开发教程一之入门

5.添加后台页

后台页是一个陌生概念,它主要用于承担插件的后台任务和长期运行的逻辑。后台页面通常是一个看不见的页面,本质上是一个js文件,主要是用来监听插件的运行情况并做出一些处理。在manifest下添加以下代码:

{
  "manifest_version": 3,
  "name": "first extension",
  "description": "a wonderful extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://www.baidu.com/"
      ]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

然后创建background.js文件,添加以下代码

console.log("运行了")
chrome?.runtime?.onInstalled?.addListener(({ reason }) => {
  if (reason === 'install') {
    chrome.tabs.create({ url: "https://www.baidu.com" });
  }
});

先移除插件再重新加载插件,在插件安刚装成功后会默认打开百度的网址,当我们点击Service Worker控制台打印:运行了。

浏览器插件(Browser Extension)开发教程一之入门

以上内容就是插件入门的全部教程,接下来我将更新插件开发的进阶教程,主要涉及一些常用API的使用

原文链接:https://juejin.cn/post/7317957339012399104 作者:yywang

(0)
上一篇 2023年12月31日 下午4:05
下一篇 2023年12月31日 下午4:15

相关推荐

发表评论

登录后才能评论