首页 > 解决方案 > 如何为特定选项卡激活 chrome.runtime.onMessage.addListener?

问题描述

我正在创建一个 chrome 扩展程序,并为此过程使用消息传递。过程是这样的: 1.- popup.js 当我点击弹出的元素时向后台发送请求。

function sendMessageToContent(contactName){
chrome.runtime.sendMessage({elementValue: contactName}, function(response) {
    console.log(response.farewell);
});

}

2.- background.js 监听请求。

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    if(request.elementValue != null){
        var accessToken = localStorage.getItem('accessToken');
        var instanceUrl = localStorage.getItem('instanceUrl');       
getContactByName(accessToken,instanceUrl,request.elementValue);
            sendResponse({farewell: "ContactResponse"});
        }
    });

它向 content.js 发送另一个请求。

function getContactByName(accessToken,instanceUrl,contactName){
var urlQuery = 'query';
fetch(instanceUrl+urlQuery,{
    method: 'get',
    headers: new Headers({
        'Authorization': 'Bearer '+accessToken,
        'Content-Type': 'application/json'
    })
})
    .then(response => {
        if(response.status != 200){
               showAuthNotification();
        }
        return response.json()
    })
    .then(data => {
        for(var i = 0; i<data.totalSize; i++){
            contact.push({name:data.records[i].Name, email:data.records[i].Email, id:data.records[i].Id});
        }
        localStorage.setItem('contactInfo', JSON.stringify(contact));
        chrome.tabs.query({}, function (tab) {
                chrome.tabs.update(tab[4].id, {active: true});
                chrome.tabs.sendMessage(tab[4].id, {message: "OK"});
        }
                        });

    })
    .catch(function (error) {
        console.log('Request failure: ', error);
    })

}

3.-问题出在这一步,后台的请求发送后应该打开一个特定的选项卡,content.js上的监听器应该接受请求。此过程仅在我在当前选项卡中时有效,当我使用chrome.tabs.update(tab[4].id, {active: true});侦听器激活另一个选项卡时

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request.message);

});

不听请求。

我怎样才能使侦听器对所有请求或特定选项卡都处于活动状态,而不仅仅是当前点击?

标签: google-chrome-extension

解决方案


推荐阅读