Firefox插件(拓展)开发

目录

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 配置文件,写入最简单的基本配置:

/* 注意,这是一个 json 文件,文件里面不能有注释性的内容 */
{
    "manifest_version": 2,      // 必须是2或3
    "name": "FirstTest",        // 拓展的名称
    "version": "0.0.1",         // 拓展的版本号
 
    "description": "my first test",    // 对当前拓展的描述

    "icons": {                 // 配置拓展的图标
        "48": "./java.jpg",
        "96": "./java.jpg"
    },

    "content_scripts": [       // 内容脚本配置
        {
            "matches": ["*://*/*"],    // 匹配应该当前拓展的URL,当前是匹配全部URL
            "js": ["index.js"]         // 脚本文件
        }
    ]
}

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 或:

Firefox插件(拓展)开发_第1张图片

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

Firefox插件(拓展)开发_第2张图片

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

Firefox插件(拓展)开发_第3张图片

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

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

3-5、如果打开成功:

Firefox插件(拓展)开发_第4张图片

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

Firefox插件(拓展)开发_第5张图片

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

4、继续开发和调试

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

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

Firefox插件(拓展)开发_第6张图片

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

        在 manifest.json 文件中添加:

    "browser_action": {
        "default_icon": {        // 指定图标
            "19": "./java.jpg",
            "38": "./java.jpg"
        },
        "default_title": "这个是工具栏按钮"
    }

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

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




    
    
    


    

        在 manifest.json 文件中添加 default_popup:

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

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

Firefox插件(拓展)开发_第7张图片

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

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

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

    

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

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

// 这里的 document 就是我们 编写的 popup.html
let btns = document.querySelectorAll('.popup-btn');

// 这里的打印是在调试插件的控制台中打印
console.log('btns:', btns);

// 为每一个 button 绑定事件
btns.forEach(e => {
    e.addEventListener('click', ()=>{
        // 这里的 innerText 就是一个十六进制的颜色值
        action(e.innerText);
    })
})

function action(color){
    // 使用 tabs 可以与浏览器系统标签进行交互
    /*
        tabs.query 获取具有指定属性的所有选项卡,如果未指定任何属性,则获取所有选项卡
        配置对象的 active:true 表示要获取的选项卡在页面中处于活动状态
        currentWindow:true 表示在当前的窗口中进行操作
    */
    browser.tabs.query({active: true, currentWindow: true}, tabs => {
        // 为当前窗口注入脚本
        browser.tabs.executeScript({code: `
            // 此时是在页面的控制台中打印,操作的是当前浏览的页面 
            console.log('color: ${color}');
            document.body.style.backgroundColor = '${color}';
        `});
    });
}

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

    "permissions":[
        "activeTab"
    ]

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

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

Firefox插件(拓展)开发_第8张图片

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

 Firefox插件(拓展)开发_第9张图片

        点击第二个按钮后:

Firefox插件(拓展)开发_第10张图片

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

Firefox插件(拓展)开发_第11张图片

 

Firefox插件(拓展)开发_第12张图片

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

Firefox插件(拓展)开发_第13张图片

 

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

9、插件配置侧边栏

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

    "sidebar_action": {
        "default_title": "My sidebar",
        "default_panel": "./sidebar/sidebar.html",
        "default_icon": "./sidebar/sidebar_icon.png"
    },

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

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




    
    
    


    

Firefox插件(拓展)开发_第14张图片

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

Firefox插件(拓展)开发_第15张图片

 

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

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

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

// 获取到两个按钮
const btns = document.querySelectorAll('.top-btns button');

// 获取当前激活的标签页面
browser.tabs.query({active: true, currentWindow: true}).then((logTabs,onError)=>{
    // 然后往当前页面中注入内容脚本,就行操作当前页面一样
    browser.tabs.executeScript({
        code:`
            // 将函数挂在window身上,可以让下次注入的脚本共享此函数
            window.mouseOverFunc = (e) => {         // 鼠标悬浮
                let target = e.target;
                target.style.border= '3px ridge red';    // 当前鼠标悬浮的元素描边
            }
            window.mouseOutFunc = (e) => {          // 鼠标离开
                let target = e.target;
                target.style.border = '';
            }
        `
    })
})

// 点击第一个按钮 开启悬浮高亮
btns[0].addEventListener('click',()=>{
    browser.tabs.query({active: true, currentWindow: true}).then((logTabs,onError)=>{
        browser.tabs.executeScript({
            code:`
                // 注入的脚本可以共享 mouseOverFunc、mouseOutFunc 函数
                document.addEventListener('mouseover', mouseOverFunc)
                document.addEventListener('mouseout', mouseOutFunc)
            `
        })
    })
})

// 点击第二个按钮取消悬浮高亮
btns[1].addEventListener('click',()=>{
    browser.tabs.query({active: true, currentWindow: true}, tabs => {
        // 为当前窗口注入脚本
        browser.tabs.executeScript({code: `
            // 移除鼠标悬浮和离开的border
            document.removeEventListener('mouseover',mouseOverFunc);
            document.removeEventListener('mouseout',mouseOutFunc);
        `});
    });
})

Firefox插件(拓展)开发_第16张图片

 

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

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

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

 

12、参考

你的第一个拓展 - Mozilla | MDN 

你可能感兴趣的:(其他,JavaScript,浏览器,javascript,firefox,chrome,html,前端)