devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Firefox插件（拓展）开发_火狐浏览器插件开发

作者：你好赵伟 | 2024-03-29 01:56:20

赞

踩

火狐浏览器插件开发

目录

0、一些概念

1、创建一个项目

2、创建内容脚本

3、将拓展临时添加到浏览器中进行测试

3-1、Ctrl+Shift+A 或：

3-2、选择调试附加组件

 3-3、选择临时加载附加组件

3-4、选择我们项目中的 manifest.json 文件打开

3-5、如果打开成功：

4、继续开发和调试

 5、添加拓展按钮到工具栏

6、为在浏览器工具栏中的拓展按钮指定一个弹出窗

 7、为弹出窗中的按钮绑定点击事件

8、插件侧边栏的开启和切换

9、插件配置侧边栏

10、添加并处理侧边栏元素事件

11、通过右键菜单来取消事件

12、参考

0、关于插件中脚本的一些概念

JavaScript编写插件时，通常分为以下几个脚本：

1. Content Script（内容脚本）：用于操作网页内容，可以访问DOM和页面元素，可以修改页面样式和行为，与页面共享同一个JavaScript环境。

2. Background Script（后台脚本）：用于处理插件的后台任务，例如处理网络请求、管理插件状态、与其他插件通信等，与页面不共享JavaScript环境。

3. Popup Script（弹出窗口脚本）：用于处理插件弹出窗口的交互逻辑，例如响应用户点击事件、发送消息给后台脚本等。

4. Options Script（选项页面脚本）：用于处理插件选项页面的交互逻辑，例如保存用户设置、发送消息给后台脚本等。

1、创建一个项目

        新建一个目录，在目录下创建一个 manifest.json 配置文件，写入最简单的基本配置：

  1. /* 注意，这是一个 json 文件，文件里面不能有注释性的内容 */
  2. {
  3.     "manifest_version": 2,      // 必须是2或3
  4.     "name": "FirstTest",        // 拓展的名称
  5.     "version": "0.0.1",         // 拓展的版本号
  6.  
  7.     "description": "my first test",    // 对当前拓展的描述
  8.  
  9.     "icons": {                 // 配置拓展的图标
  10.         "48": "./java.jpg",
  11.         "96": "./java.jpg"
  12.     },
  13.  
  14.     "content_scripts": [       // 内容脚本配置
  15.         {
  16.             "matches": ["*://*/*"],    // 匹配应该当前拓展的URL，当前是匹配全部URL
  17.             "js": ["index.js"]         // 脚本文件
  18.         }
  19.     ]
  20. }

2、创建内容脚本

        在项目目录下创建一个 index.js 写一个简单的内容脚本。

        这个 index.js 就是manifest.json文件中("content_scripts"."js")[1]中的内容（名字要一致才匹配到）。

document.body.style.backgroundColor = '#ff8f0029';

        这个index.js 文件只写一段代码，内容是让 body 的背景色变成一种浅肉色。

3、将拓展临时添加到浏览器中进行测试

        在火狐中添加：

3-1、Ctrl+Shift+A 或：

3-2、选择调试附加组件

 3-3、选择临时加载附加组件

3-4、选择我们项目中的 manifest.json 文件打开

        在谷歌浏览器中是要将整个项目的文件夹导入

3-5、如果打开成功：

         此时我们打开其他的网页查看，如进入到百度：

        可以看到网页加载完成后，在短暂的时间内背景色会变成上面的颜色，页面的body元素确实添加了我们在内容脚本中设置的样式。

4、继续开发和调试

        当我们完成了上述的步骤之后，我们可以继续在我们的项目中进行开发。

        当我们需要继续到浏览器中进行调试和观察的时候，只需要将文件保存，然后到浏览器临时扩展处点击重载按钮，即可实现同步（确保项目文件路径没有改变）。

 5、添加拓展按钮到工具栏

        在 manifest.json 文件中添加：

  1.     "browser_action": {
  2.         "default_icon": {        // 指定图标
  3.             "19": "./java.jpg",
  4.             "38": "./java.jpg"
  5.         },
  6.         "default_title": "这个是工具栏按钮"
  7.     }

6、为在浏览器工具栏中的拓展按钮指定一个弹出窗

        在项目中新建一个 popup 文件夹，在文件夹下建立一个 popup.html 文件，在里面编写弹出窗的html代码，也可以编写与之相关的css、js代码。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <style>
  7.         html,body{
  8.             width: 100px;
  9.             box-sizing: border-box;
  10.             /* padding: 5px 8px; */
  11.         }
  12.         .popup-content{
  13.             width: 100%;
  14.             display: flex;
  15.             flex-direction: column;
  16.             justify-content: center;
  17.             align-items: center;
  18.         }
  19.         .popup-content > button{
  20.             width: 95%;
  21.             height: 35px;
  22.             border-radius: 12px;
  23.             border: 0;
  24.             box-shadow: 0 1px 10px 1px #cccfff;
  25.             margin: 5px 0;
  26.             background-color: rgb(188, 209, 249);
  27.         }
  28.         button:hover{
  29.             cursor: pointer;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="popup-content">
  35.         <button>选项A</button>
  36.         <button>选项B</button>
  37.         <button>选项C</button>
  38.     </div>
  39. </body>
  40. </html>

        在 manifest.json 文件中添加 default_popup:

  1.     "browser_action": {
  2.         "default_icon": {
  3.             "19": "./java.jpg",
  4.             "38": "./java.jpg"
  5.         },
  6.         "default_title": "这个是工具栏按钮",
  7.         "default_popup": "popup/popup.html"  // 添加这一句，指定弹出窗的html文件
  8.     }

         到临时拓展中对当前拓展进行重载，然后点击工具栏对应的按钮，就可以看到弹出窗：

 7、为弹出窗中的按钮绑定点击事件

        刚才的 .html 文件中提供了三个按钮，现在试图为每一个按钮绑定一个点击事件，当用户点击到一个按钮时，切换当前页面的 body 元素的背景色。

        先修改 .html 文件，为按钮添加一个相同的类名以及不同的innerText：

  1.     <div id="popup-content">
  2.         <button class="popup-btn">#ff00002e</button>
  3.         <button class="popup-btn">#0000ff21</button>
  4.         <button class="popup-btn">#2cff0026</button>
  5.     </div>

        在 popup 目录下新建一个 popup.js 文件，然后在.html 文件中引入：

<script src="./popup.js"></script>

        编写 popup.js 文件来实现要求：

  1. // 这里的 document 就是我们 编写的 popup.html
  2. let btns = document.querySelectorAll('.popup-btn');
  3.  
  4. // 这里的打印是在调试插件的控制台中打印
  5. console.log('btns:', btns);
  6.  
  7. // 为每一个 button 绑定事件
  8. btns.forEach(e => {
  9.     e.addEventListener('click', ()=>{
  10.         // 这里的 innerText 就是一个十六进制的颜色值
  11.         action(e.innerText);
  12.     })
  13. })
  14.  
  15. function action(color){
  16.     // 使用 tabs 可以与浏览器系统标签进行交互
  17.     /*
  18.         tabs.query 获取具有指定属性的所有选项卡，如果未指定任何属性，则获取所有选项卡
  19.         配置对象的 active:true 表示要获取的选项卡在页面中处于活动状态
  20.         currentWindow:true 表示在当前的窗口中进行操作
  21.     */
  22.     browser.tabs.query({active: true, currentWindow: true}, tabs => {
  23.         // 为当前窗口注入脚本
  24.         browser.tabs.executeScript({code: `
  25.             // 此时是在页面的控制台中打印，操作的是当前浏览的页面 
  26.             console.log('color: ${color}');
  27.             document.body.style.backgroundColor = '${color}';
  28.         `});
  29.     });
  30. }

        由于要使用到 tab 这个API，需要在manifest.json 文件中添加许可：

  1.     "permissions":[
  2.         "activeTab"
  3.     ]

        到临时拓展的位置，点击当前临时拓展模块上的“检查”按钮，即可打开插件开发的检查调试工具。

        当点击工具栏上的插件图标时， 会在插件的开发者工具的控制台中打印 popup.html 中三个按钮。

        当点击插件弹窗的第一个按钮时，页面背景色改变，同时在控制台中输出当前背景色号：

 

        点击第二个按钮后：

8、插件侧边栏的开启和切换

 

         将侧栏拖动到工具栏的位置：

 

         点击该侧栏按钮就能打开或关闭插件的侧边栏（只有插件提供了侧边栏，才有侧边栏的服务）。

9、插件配置侧边栏

        在 manifest.json 中添加 “sidebar_action” 配置项，default_title 设置侧边栏的名称为“My sidebar”，default_panel 设置面板的界面文件为指定的html文件，“default_icon”设置侧边栏的图标。

  1.     "sidebar_action": {
  2.         "default_title": "My sidebar",
  3.         "default_panel": "./sidebar/sidebar.html",
  4.         "default_icon": "./sidebar/sidebar_icon.png"
  5.     },

         在项目文件夹下创建一个 sidebar 目录，并在该目录下创建一个 sidebar.html 文件，用来配置侧边栏的界面。

        写一个简单的侧边栏界面：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <style>
  7.         .container{
  8.             border: 3px solid pink;
  9.             width: 100%;
  10.             height: 100vh;
  11.             box-sizing: border-box;
  12.         }
  13.         .top-btns{
  14.             width: 100%;
  15.             height: 50px;
  16.             display: flex;
  17.             justify-content: space-around;
  18.             padding: 5px 8px;
  19.         }
  20.         .top-btns > button{
  21.             outline: none;
  22.             padding: 3px 12px;
  23.             border-radius: 8px;
  24.             box-shadow: 0 1px 10px 2px #eeefff;
  25.             border: 0;
  26.             background-color: rgb(209, 165, 251);
  27.         }
  28.         .top-btns > button:hover{
  29.             cursor: pointer;
  30.             box-shadow: 0 1px 5px .5px #cacaca;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.         <div class="top-btns">
  37.             <button>btn A</button>
  38.             <button>btn B</button>
  39.         </div>
  40.     </div>
  41. </body>
  42. </html>

         在这里可以切换插件的侧边栏，当前只有一个插件（就是现在这个插件）提供了侧边栏服务，所以没有其他可以切换。

 

10、添加并处理侧边栏元素事件

        在 sidebar.html 文件中添加 script 标签，引入script 脚本处理侧边栏事件：

<script src="./index.js"></script>

        在 index.js 文件中，为两个按钮添加点击事件。当点击第一个按钮后，操作鼠标在当前浏览的页面中滑动，当鼠标悬浮在某元素上时，为该元素进行高亮描边。当点击第二个按钮时，取消该事件，操作鼠标在网页上滑动时，悬浮在某元素上，元素的 border 不再改变。

  1. // 获取到两个按钮
  2. const btns = document.querySelectorAll('.top-btns button');
  3.  
  4. // 获取当前激活的标签页面
  5. browser.tabs.query({active: true, currentWindow: true}).then((logTabs,onError)=>{
  6.     // 然后往当前页面中注入内容脚本，就行操作当前页面一样
  7.     browser.tabs.executeScript({
  8.         code:`
  9.             // 将函数挂在window身上，可以让下次注入的脚本共享此函数
  10.             window.mouseOverFunc = (e) => {         // 鼠标悬浮
  11.                 let target = e.target;
  12.                 target.style.border= '3px ridge red';    // 当前鼠标悬浮的元素描边
  13.             }
  14.             window.mouseOutFunc = (e) => {          // 鼠标离开
  15.                 let target = e.target;
  16.                 target.style.border = '';
  17.             }
  18.         `
  19.     })
  20. })
  21.  
  22. // 点击第一个按钮 开启悬浮高亮
  23. btns[0].addEventListener('click',()=>{
  24.     browser.tabs.query({active: true, currentWindow: true}).then((logTabs,onError)=>{
  25.         browser.tabs.executeScript({
  26.             code:`
  27.                 // 注入的脚本可以共享 mouseOverFunc、mouseOutFunc 函数
  28.                 document.addEventListener('mouseover', mouseOverFunc)
  29.                 document.addEventListener('mouseout', mouseOutFunc)
  30.             `
  31.         })
  32.     })
  33. })
  34.  
  35. // 点击第二个按钮取消悬浮高亮
  36. btns[1].addEventListener('click',()=>{
  37.     browser.tabs.query({active: true, currentWindow: true}, tabs => {
  38.         // 为当前窗口注入脚本
  39.         browser.tabs.executeScript({code: `
  40.             // 移除鼠标悬浮和离开的border
  41.             document.removeEventListener('mouseover',mouseOverFunc);
  42.             document.removeEventListener('mouseout',mouseOutFunc);
  43.         `});
  44.     });
  45. })

 

11、通过右键菜单来取消事件

         继续在 index.js 文件中增加代码：

  1. // 创建右键菜单选项，用于停止选择
  2. browser.contextMenus.create({
  3.     id: "stop-select-element",              // id在菜单中唯一
  4.     title: "stop select element",           // 名称
  5.     contexts: ["page", "selection", "link"]     // 在哪些情况下有该选项
  6. });
  7. // 监听右键菜单选项被点击
  8. browser.contextMenus.onClicked.addListener((info,tab)=>{
  9.     // 判断是否执行
  10.     if(info.menuItemId === 'stop-select-element'){
  11.         // 注入脚本，移除事件监听器
  12.         browser.tabs.query({active:true, currentWindow:true}).then(()=>{
  13.             browser.tabs.executeScript({
  14.                 code:`
  15.                     document.removeEventListener('mouseover',mouseOverFunc);
  16.                     document.removeEventListener('mouseout',mouseOutFunc);
  17.                 `
  18.             })
  19.         })
  20.     }
  21. })

 

12、参考

你的第一个拓展 - Mozilla | MDN 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/333001
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号