chrome插件开发——option(选项页)的通信

chrome插件开发中的options页，就是插件的设置页面，有2个入口，一个是右键图标有一个“选项”菜单，还有一个在插件管理页面：

要想在插件中开启这个功能需要在配置页中进行配置，浏览器版本不同，配置的方法也不同

manifest.json

// Chrome40以前的插件配置页写法
"options_page": "options.html",
// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
"options_ui":
{"page": "options.html",// 添加一些默认的样式，推荐使用"chrome_style": true
},

此时，我们创建一个options.html后，就有了一个options页面，可以在右击图标或者在插件详情页中开启该选项页了

假设我需要实现一个功能，在选项页中能够对页面的文字格式进行更改，就需要options发出请求给content_script.js，与content_script.js进行通信。

但是我发现options不能直接和content_script页面进行通信，因为content_script并不在当前开启的页面中，所以我们需要一个中间载体，background，background可以理解和popup一样，只是popup页面只有在点击图标的时候才会触发出来，否则是不会开启的，而background则是一直在后台运行的。

开启background也需要在manifest.json中进行配置

"background":{// 2种指定方式，如果指定JS，那么会自动生成一个背景页。选其中一个即可，如果都开启会报错// "page": "background.html","scripts": ["js/background.js"]},

options.html

<!DOCTYPE html>
<html><head><style type="text/css">body{border-top: 1px solid #000;}button{width: 63px;}</style><meta charset="utf-8" /></head><body><div><p>设置微信文章页文字大小</p><button class="change_px12">12px</button><button class="change_px14">14px</button><button class="change_px16">16px</button><button class="change_px18">18px</button></div><script src="js/jquery-3.3.1.min.js"></script><script src="js/options.js"></script></body>
</html>

options.js

var windows = chrome.extension.getViews();
for (var extensionWindow of windows) {if (extensionWindow.location.pathname === "/_generated_background_page.html") {$(".change_px12").click(function () {var page = chrome.extension.getBackgroundPage();page.change_px12(); })$(".change_px14").click(function () {var page = chrome.extension.getBackgroundPage();page.change_px14(); })$(".change_px16").click(function () {var page = chrome.extension.getBackgroundPage();page.change_px16(); })$(".change_px18").click(function () {var page = chrome.extension.getBackgroundPage();page.change_px18(); })}
}

现在我们通过background这个载体来进行通信，在background中去监听options中的点击事件，如果点击了，则发送请求给content_script，让content_script进行处理，成功后将结果返回给background。

background.js

function sendMessageToContentScript(message, callback)
{//这里的url填写要操作的页面,我是要操作的微信文章页chrome.tabs.query({url: "*://*.weixin.qq.com/*"}, function(tabs){chrome.tabs.sendMessage(tabs[0].id, message, function(response){if(callback) callback(response);});});
}
function change_px12() {sendMessageToContentScript({cmd:'change_px12', value:'Change px to 12 start！'}, function(response){console.log('来自content的回复：'+response);});
}
function change_px14() {sendMessageToContentScript({cmd:'change_px14', value:'Change px to 14 start！'}, function(response){console.log('来自content的回复：'+response);});
}
function change_px16() {sendMessageToContentScript({cmd:'change_px16', value:'Change px to 16 start！'}, function(response){console.log('来自content的回复：'+response);});
}
function change_px18() {sendMessageToContentScript({cmd:'change_px18', value:'Change px to 18 start！'}, function(response){console.log('来自content的回复：'+response);});
}

content_script.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{var tag_name = document.getElementById("js_content").childNodes;if(request.cmd == 'change_px12'){for (var i = 0; i < tag_name.length; i++) {if (tag_name[i].nodeName == "P") {if (tag_name[i].firstElementChild) {if (tag_name[i].firstElementChild.nodeName == "SPAN") {tag_name[i].firstElementChild.setAttribute('style', 'font-size:12px');}}}}sendResponse('change px to 12 over !');}if(request.cmd == 'change_px14'){for (var i = 0; i < tag_name.length; i++) {if (tag_name[i].nodeName == "P") {if (tag_name[i].firstElementChild) {if (tag_name[i].firstElementChild.nodeName == "SPAN") {tag_name[i].firstElementChild.setAttribute('style', 'font-size:14px');}}}}sendResponse('change px to 14 over !');}if(request.cmd == 'change_px16'){for (var i = 0; i < tag_name.length; i++) {if (tag_name[i].nodeName == "P") {if (tag_name[i].firstElementChild) {if (tag_name[i].firstElementChild.nodeName == "SPAN") {tag_name[i].firstElementChild.setAttribute('style', 'font-size:16px');}}}}sendResponse('change px to 16 over !');}if(request.cmd == 'change_px18'){for (var i = 0; i < tag_name.length; i++) {if (tag_name[i].nodeName == "P") {if (tag_name[i].firstElementChild) {if (tag_name[i].firstElementChild.nodeName == "SPAN") {tag_name[i].firstElementChild.setAttribute('style', 'font-size:18px');}}}}sendResponse('change px to 18 over !');}
});