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

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

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

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 !');
    }
});

秒客网