关于前端:手把手教你开发一个浏览器翻译插件

35次阅读

共计 5526 个字符，预计需要花费 14 分钟才能阅读完成。

前言

最近在钻研一些比拟有意思的货色，前几天玩了一个微信聊天机器人，丑化图片的，明天想写个浏览器插件。话不多说间接开始。

注释

想写一个浏览器插件比较简单，跟咱们平时开发我的项目一样，首先创立一个文件夹，保障上面会有一个 manifest.json 文件即可。

这是我的我的项目构造：

留神：这里会有个小坑，mainfest.json文件名肯定要写对，不然应用开发者模式加载插件的时候就会报错。

接下来是一个最根本的配置

{
    "name": "IRON MAN",
    "version": "1.0.0",
    "description": "I am iron man",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "icons": {
        "16": "images/4.png",
        "48": "images/4.png",
        "128": "images/4.png"
    },
    "page_action": {
        "default_popup": "popup.html",
        "default_icon": "images/4.png"
    }
}

配置好之后就能够去浏览器中增加插件了，就是这么简略

从右上角菜单 -> 更多工具 -> 扩大程序能够进入 插件治理页面，也能够间接在地址栏输出 chrome://extensions 拜访。

勾选 开发者模式 即能够文件夹的模式间接加载插件，否则只能装置 .crx 格局的文件。

manifest.json的配置：

在 manifest.json 中，manifest_version、name、version 3 个是必不可少的，description和 icons 是举荐的。

这里贴一下从大佬那里粘贴来的解析：

{
    // 清单文件的版本，这个必须写，而且必须是 2
    "manifest_version": 2,
    // 插件的名称
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件形容
    "description": "简略的 Chrome 扩大 demo",
    // 图标，个别偷懒全副用一个尺寸的也没问题
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 会始终常驻的后盾 JS 或后盾页面
    "background":
    {
        // 2 种指定形式，如果指定 JS，那么会主动生成一个背景页
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 浏览器右上角图标设置，browser_action、page_action、app 必须三选一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的题目，可选
        "default_title": "这是一个示例 Chrome 插件",
        "default_popup": "popup.html"
    },
    // 当某些特定页面关上才显示的图标
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是 pageAction",
        "default_popup": "popup.html"
    },*/
    // 须要间接注入页面的 JS
    "content_scripts": 
    [
        {//"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 示意匹配所有地址
            "matches": ["<all_urls>"],
            // 多个 JS 按程序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS 的注入能够轻易一点，然而 CSS 的留神就要千万小心了，因为一不小心就可能影响全局款式
            "css": ["css/custom.css"],
            // 代码注入的工夫，可选值："document_start", "document_end", or "document_idle"，最初一个示意页面闲暇时，默认 document_idle
            "run_at": "document_start"
        },
        // 这里仅仅是为了演示 content-script 能够配置多个规定
        {"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 告诉
        "webRequest", // web 申请
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 能够通过 executeScript 或者 insertCSS 拜访的网站
        "https://*/*" // 能够通过 executeScript 或者 insertCSS 拜访的网站
    ],
    // 一般页面可能间接拜访的插件资源列表，如果不设置是无奈间接拜访的
    "web_accessible_resources": ["js/inject.js"],
    // 插件主页，这个很重要，不要节约了这个收费广告位
    "homepage_url": "https://www.baidu.com",
    // 笼罩浏览器默认页面
    "chrome_url_overrides":
    {
        // 笼罩浏览器默认的新标签页
        "newtab": "newtab.html"
    },
    // Chrome40 以前的插件配置页写法
    "options_page": "options.html",
    // Chrome40 当前的插件配置页写法，如果 2 个都写，新版 Chrome 只认前面这一个
    "options_ui":
    {
        "page": "options.html",
        // 增加一些默认的款式，举荐应用
        "chrome_style": true
    },
    // 向地址栏注册一个关键字以提供搜寻倡议，只能设置一个关键字
    "omnibox": {"keyword" : "go"},
    // 默认语言
    "default_locale": "zh_CN",
    // devtools 页面入口，留神只能指向一个 HTML 文件，不能是 JS 文件
    "devtools_page": "devtools.html"
}

接下来一步一步介绍我是怎么实现两个插件的性能的

1. 注册监听事件

在扩大程序的 background 脚本中注册监听事件：在脚本加载之后即触发监听

chrome.runtime.onInstalled.addListener(function () {chrome.storage.sync.set({ color: '#e84f20'}, function () {console.log("虾皮的橙色");
    });
     chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [new chrome.declarativeContent.PageStateMatcher({pageUrl: { hostEquals: 'www.baidu.com'},
            })
            ],
            actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
    });
});

2. 注册权限

因为咱们在 background 中应用了 chrome.storage 等 api，须要在 manifest.json 中注册

   "permissions": [
        "storage",
        "declarativeContent",
        "tabs",
        "activeTab",
        "contextMenus",
    ],

3. 在扩大程序页面刷新咱们的扩大程序

点击查看 背景页, 能够看到打印内容

4. 引入 ICON 图标

其实之前放出的配置文件中曾经配置了图标，在下面的截图中也能够看到钢铁侠的图标。那么这里提两点留神点：

  • 对于未压缩的扩大程序，只能应用 png 图标。
  • 图标是能够适配不同的大小的，懒的话就全用一个。

5. 引入 popup 页面

我在页面中简略写了两个性能：让页面变色，让页面色彩复原。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            height: 50px;
            background-color: #e84f20;
            border-radius: 4px;
            line-height: 50px;
            text-align: center;
            padding: 0 5px;
            color: #fff;
            margin-right: 20px;
        }

        .wrapper {
            width: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <Button id="btn" class="btn"> 点击变成虾皮红 </Button>
        <Button id='clear' class="btn"> 复原 </Button>
    </div>
    <script src="./popup.js"></script>
</body>

</html>

js 文件如下：

let changeColor = document.getElementById('btn');
let clear = document.getElementById('clear');
chrome.storage.sync.get('color', function (data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function (element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        chrome.tabs.executeScript(tabs[0].id,
            {code: 'document.body.style.backgroundColor ="' + color + '";'});
    });
};
clear.onclick = (ele) => {chrome.tabs.query({ active: true, currentWindow: true}, function (tabs) {
        let color = '#fff'
        chrome.tabs.executeScript(tabs[0].id,
            {code: 'document.body.style.backgroundColor ="' + color + '";'});
    });
}

应用 chrome.storage.sync.get 获取内存中的色彩。应用 chrome.tabs.executeScript 往页面注入脚本。

须要留神的是：咱们应用到的 chrome API 都须要在 manifest.json 中配置

当初咱们就能够在 baidu 的页面中玩咱们的插件了!

点击之后的样子

也能够将色彩复原。

那么第一个给网站变色彩和复原的性能曾经实现了。接下来想做个翻译的性能。

6. 持续增加 background 脚本

   chrome.contextMenus.create({
        id: "9527",
        contexts: ['selection'],
        title: '让钢铁侠翻译：%s', // 显示的文字，除非为“separator”类型否则此参数必须，如果类型为“selection”，能够应用 %s 显示选定的文本
    })
    console.log(chrome.contextMenus)
    chrome.contextMenus.onClicked.addListener((info, tab) => {
        const query = info.selectionText;
        const url = "https://fanyi.baidu.com/translate?#est/zh/" + query;
        chrome.tabs.create({url: url});
    })

这段脚本的性能是在页面中创立一个右键的操作菜单，如图所示

咱们能够增加监听事件在点击的时候去对应的网址做一些事件。例子中我是给选中的文本增加了一个翻译的性能，通过监听点击事件跳转到百度翻译，并把选中文本带过来进行翻译。

这里同样须要留神：contextMenus 须要在 manijest.json 中注册。

到这里咱们的性能就曾经齐全实现了。因为才思不够麻利，临时没什么更加实用功能的研发。心愿各位能够才思泉涌给我一些倡议~~

最初

网上一些比拟全的教程 +API

谷歌插件开发 API

插件开发指南

最初谢谢大家！

正文完
前端
发表至： 前端
2021-09-16
 0
关于前端:DGIOT边缘主机Linux版操作手册
关于前端:TypeScript-高级类型你了解几个
关于前端:近-20k-Star的项目说不做就不做了但总结的内容值得借鉴
关于前端:面试官说说对受控组件和非受控组件的理解应用场景