chrome插件开发——将页面复制到微信公众平台

最新推荐文章于 2023-11-30 21:27:30 发布

鱼丸粗面不要香菜

最新推荐文章于 2023-11-30 21:27:30 发布

阅读量1k

点赞数 1

分类专栏：学习笔记文章标签： Chrome插件

本文链接：https://blog.csdn.net/qq_41080490/article/details/79643054

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

之前写的将html网页中的元素复制到微信编辑器中的代码，并不是很实用，那么就想着能否做一个Chrome小插件，实现该功能，这样就可以方便的将页面复制到微信公众平台编辑器中了。

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

我们需要实现的就是下图中的小猪图标
这里写图片描述
话不多说，直接开始从代码介绍吧。

首先介绍下代码的核心文件

manifest.json

这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，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"
    },
    // 浏览器右上角图标设置，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"
        }
    ],
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 通知
        "webRequest", // web请求
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
    ],
}

popup.html

popup是点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，我们需要用到这个来出发复制的事件。

<html>
    <head>
        <meta charset="utf-8" />
        <style>
            body{
                width: 80px;
                height: 50px;
            }
            .Btn{
                background-color: rgb(80, 176, 246);
                border: none;
                color: white;
                padding: 4px 5px;
                border-radius: 4px;
                margin: 5px 0;
                width: 80px;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="Btn2" class="Btn" onclick="change()">复制图文</button>
        </div>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/popup.js"></script>
    </body>
</html>

popup.js

popup.js则是通过popup.html来引入，对popup.html小页面来进行操作的js代码

function sendMessageToContentScript(message, callback)
{
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
        chrome.tabs.sendMessage(tabs[0].id, message, function(response)
        {
            if(callback) callback(response);
        });
    });
}
// 复制图文发送请求
$("#Btn2").click(function () {//给web页面的按钮绑定点击事件，通过点击事件来控制发送消息
    sendMessageToContentScript({cmd:'copy_article', value:'Copy article start！'}, function(response)
    {
        console.log('来自content的回复：'+response);
    });
});

content-scripts.js

content-scripts，就是Chrome插件中向页面注入脚本的一种形式，我们可以借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS，这个也是我们要重点使用的功能。

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    if(request.cmd == 'copy_article'){
        var temp = document.getElementById("js_content").innerHTML;
        document.addEventListener('copy',myFunction);
        function myFunction(e) {
            e.preventDefault(); 
            e.clipboardData.setData('text/html', temp);
        }
        document.execCommand("copy");
        alert("已复制好，可贴粘。");
        sendResponse('Copy article over !');
    }
});

我的思路是：在popup.html中写一个button的按钮，然后在popup.js中进行操作，但是popup.js不能直接操作浏览器dom，而content-scripts.js可以，所以我就希望能够在popup.js中给button绑定一个点击事件，然后通过popup.js来发送一个消息给content-scripts.js等content-scripts.js收到了消息后就开始多页面dom进行操作，来实现复制的功能。
但是现在的首要问题就是content-scripts.js与popup.js之间如何通信呢？
经过查阅资料，了解到content-scripts.js与popup.js的通信是通过chrome.runtime.sendMessage、chrome.runtime.connect来实现的。
eg：
popup.js先发送请求给content-scripts.js

function sendMessageToContentScript(message, callback)
{
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
        chrome.tabs.sendMessage(tabs[0].id, message, function(response)
        {
            if(callback) callback(response);
        });
    });
}
sendMessageToContentScript({cmd:'test', value:'你好，我是popup！'}, function(response)
{
    console.log('来自content的回复：'+response);
});

content-scripts.js接收到后给响应给popup.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    // console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
    if(request.cmd == 'test') alert(request.value);
    sendResponse('我收到了你的消息！');
});

现在代码有了，就要放在Chrome中了，我们点击更多工具中的扩展程序
这里写图片描述
开启开发者模式

最后点击加载已解压的扩展程序，找到文件路径，确认即可