chrome插件开发——将页面复制到微信公众平台
之前写的将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://*/*"],// "" 表示匹配所有地址 "matches": ["" ],// 多个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中了，我们点击更多工具中的扩展程序
开启开发者模式
最后点击加载已解压的扩展程序，找到文件路径，确认即可
文档推荐：https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！