chrome插件开发全攻略_浏览器插件制作教程「建议收藏」

chrome插件开发全攻略_浏览器插件制作教程「建议收藏」对于一直从事前端开发者的你,在未开发过任何插件的前提下,肯定会很想知道,chrome插件开发和普通网页开发有什么区别呢?如何从0开始着手开发chrome插件呢?下面跟随这片文章来一起学习chrome插件的开发的流程吧~_谷歌扩展mv3读取json文件内容

对于一直从事前端开发者的你,在未开发过任何插件的前提下,肯定会很想知道,chrome插件开发和普通网页开发有什么区别呢? 如何从0开始着手开发chrome插件呢?下面跟随这片文章来一起学习chrome插件的开发的流程吧~

首先,这几个网站你必须要提前了解:

chrome插件开发官方文档:https://developer.chrome.com/docs/extensions/mv3/

chrome扩展程序调试地址:chrome://extensions/ (注意:需要打开开发者模式)

chrome应用商店:https://chrome.google.com/webstore/category/extensions

chrome插件其实就是使用前端语法+调用chrome浏览器的API开发的,所以我们必须得了解chrome浏览器的API以及文件结构。

步骤1: 启用开发者模式

在chrome浏览器中,打开扩展程序页面chrome://extensions/,启用开发者模式,如图所示:

image.png

步骤2:  创建插件清单文件manifest.json

manifest.json清单文件此JSON文件描述插件的功能和配置,是必须配置的,位于项目根目录

2.1 基本配置

image.png

{

      “manifest_version”: 3, 插件版本,现在都用3了,后面就会不再支持版本2
      “name”: “Hello Extensions”, 插件名称
      “description”: “Base Level Extension”, 插件描述
      “version”: “1.0”,  插件开发版本
    }

2.2 action : 声明插件图标和点击后展示的页面

{

    …
     “action”: { 
        “default_popup”: “hello.html”,  点击扩展图标时,弹出的HTML页面
        “default_icon”: { 用于指定插件在不同位置的默认图标
             “16”: “images/icon16.png”,
             “32”: “images/icon32.png”,
             “48”: “images/icon48.png”,
             “128”: “images/icon128.png”
         }  
      },
      “icons”: { 当用户在 Chrome Web Store 中浏览插件或在安装插件时看到插件的图标时,会使用 icons 指定的图标
        “128”: “icons/icon128.png”,
        “48”: “icons/icon48.png”,
        “16”: “icons/icon16.png”
      },
    }

image.png

2.3 声明内容脚本content_scripts,这个也是manifest.json很重要的一点

{

      …
      “content_scripts”: [
        {

          “js”: [“scripts/content.js”], 内容脚本路径
          “matches”: [
            “https://developer.chrome.com/docs/extensions/*”, 需要插入内容脚本的网址
          ]
        }
      ]
    }

注意:matches里面匹配的网址后面要带*,除非你只在这个网站某个固定网址使用,否则都加*,不然会出现content.js加载失败,无法插入到该网站中,如果要支持所有网站,则设置"matches": ["<all_urls>"]

2.4 service_worker : 在后台监听浏览器事件(service_worker是特殊的javascript环境,加载它处理事件并在不需要时终止)

{

      …
      service_worker: “scripts/background.js”
    }

2.5 host_permissions: 插件可以与特定主机进行通信、访问和修改网页内容
{
    ...
    "host_permissions": [
      "https://example.com/*",
      "http://www.example.org/",
      "https://api.example.net/"
    ]
}

例如我们需要在service_worker.js文件中获取某个网站缓存的数据,则首先需要在清单文件中“host_permissions”声明该网站,然后才能获取,如下所示

chrome.runtime.onInstalled.addListener(() => {

        chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {    
            chrome.tabs.get(tabId, async(updatedTab) => {

                const url = new URL(updatedTab.url);
                if (url.hostname === ‘example.com’) {                      
                    // 在控制台打印存储的数据         
                    const data = await chrome.scripting.executeScript({

                        target: { tabId: tab.id },
                        function: () => {

                            return {                         
                                userInfo: sessionStorage.getItem(‘userInfo’),
                            };
                        }
                    });
                                
                    if(data && data.length){                     
                        userInfo = JSON.parse(data[0].result.userInfo);                    
                    }
                }  
            });
        });
    });

步骤3: 开发插件功能

根据插件的需求,创建相应的 HTML、CSS 和 JavaScript 文件,
使用 JavaScript 编写插件的逻辑和功能。您可以通过 DOM 操作、事件处理和与chrome API 的交互来实现所需的功能。
image.png

步骤4: 加载和调试

加载插件:首先在chrome浏览器地址栏输入chrome://extensions/开发扩展程序页面,点击左上角的“加载已解压的扩展程序”,把自己本地的文件夹直接导入进去,如下图所示。
image.png

调试service_worker.js文件

image.png

调试popup.js文件

鼠标点击插件,点击右键菜单会出现“审查弹出内容”,即可进行调试
image.png

调试content_script.js文件

打开manifest.json中配置content_script对应的网站地址,F12打开调试,如果下方出现了你开发的插件名称以及文件,则代表你的页面成功插入该网站,在console中即可进行调试
image.png

步骤5: 打包和发布插件

chrome中也支持自己打包文件,打包之后生成后缀为.crx的文件,然后把.crx结尾的插件导入到浏览器,但是未发布的插件,开关无法打开,一直处于置灰状态,导致无法使用,查看详情才知道Chrome 只允许使用 Chrome 应用商店中发布的扩展程序
相关说明文档如下:https://support.google.com/chrome_webstore/answer/2811969?visit_id=638279384706503272-341708265&p=ui_remove_non_cws_extensions&hl=zh-Hans&rd=2

注册以及发布流程如下:
chrome应用商店点击注册,就会看到如下图所示。首先同意左侧的开发者协议和政策,然后去支付注册费5美元进行注册。
image.png

这个注册支付,不能用国内的银行卡以及信用卡,要用Visa卡,没有的话也没关系,可以直接去淘宝买一个。

chrome应用商店注册成功之后,先把本地文件压缩为.zip格式,点击上传即可(最多支持发布20个插件)。
image.png
上传成功后,需要你填写一些关于插件相关信息,填写完整之后右上角的“提交审核”按钮才会高亮,然后就能提交审核了。

注意chrome插件的公开范围越广,审核时间越长。
image.png

常用的chrome API

chrome.runtime:提供与插件运行时环境交互的功能,包括管理插件的生命周期、发送消息、注册事件监听器等。

chrome.extension:这个 API 已被废弃,不推荐使用。它提供了一些与插件相关的功能,例如获取插件的 URL、向页面注入脚本等。相应的功能可以使用 chrome.runtime 替代。
 
chrome.tabs: 允许与浏览器标签页进行交互,包括获取当前标签页信息、打开新标签页、切换标签页、执行脚本等。

chrome.windows: 允许与浏览器窗口进行交互,包括获取当前窗口信息、打开新窗口、切换窗口、调整窗口大小等。

chrome.storage: 提供持久化存储功能,用于在插件中保存和检索数据,包括使用

chrome.storage.local : 进行本地存储和 chrome.storage.sync 进行跨设备同步。

chrome.runtime.sendMessage: 用于在插件组件之间发送消息,可以实现不同组件之间的通信和数据传递。

chrome.runtime.onMessage:注册消息监听器,用于接收其他组件发送的消息,并进行相应的处理。
 
chrome.browserAction:允许在浏览器工具栏中创建图标按钮,并定义与按钮相关的交互行为,例如点击按钮时打开弹出窗口或执行特定操作。

chrome.contextMenus: 允许在浏览器右键菜单中添加自定义菜单项,并定义菜单项的点击行为。

chrome.webRequest: 允许拦截和修改网络请求,包括请求的头部、URL、响应内容等,以实现网络请求的修改和过滤。

chrome.notifications:允许在操作系统通知区域显示通知,以向用户发送系统级别的提示和提醒。

chrome.identity: 提供身份验证和用户信息相关的功能,例如使用 OAuth2 进行用户身份验证。

今天的文章chrome插件开发全攻略_浏览器插件制作教程「建议收藏」分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/79898.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注