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

前言

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

注释

想写一个浏览器插件比较简单，跟咱们平时开发我的项目一样，首先创立一个文件夹，保障上面会有一个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、version3个是必不可少的，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

插件开发指南

最初谢谢大家！

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

前言

注释

1. 注册监听事件

2.注册权限

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

4.引入ICON图标

5. 引入popup页面

6.持续增加background脚本

最初

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

前言

注释

1. 注册监听事件

2.注册权限

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

4.引入ICON图标

5. 引入popup页面

6.持续增加background脚本

最初

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复