CODEWITHSUNDEEP
google-chrome-extension
Jhon
Jhon

Reputation: 41

chrome.runtime.onMessage call multiple time

I create a extension. When user click on extension icon it will send message to the content script and then content script again call a function. In side that function it will send message to the background script. I face some strange behavior chrome.runtime.onMessage.addListener() in background script execute multiple times.

manifest.json

{
    "manifest_version": 2,
    "name": "Reportar",
    "version": "1.0",
    "description": "Loreipsum.",
    "background": {
        "scripts": ["bootstrap.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "img/icon48.png",
        "default_title": "Gitlab Issue"
    },
    "web_accessible_resources": [
        "templates/*.html"
    ],
    "content_scripts": [{
            "all_frames": false,
            "css": ["content_style.css"],
            "js": ["content_script.js"],
            "matches": ["http://*/*", "*/*"]
        }],
    "icons": {
        "16": "img/icon20.png",
        "48": "img/icon48.png",
        "128": "img/icon128.png"
    },
    "permissions": [
        "tabs",
        "activeTab",
        "<all_urls>",
        "storage"
    ]
}

background.js

function clickOnIssue() {
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        console.log('Going to send message to content script that user click on browserAction icon');
        chrome.tabs.sendMessage(tabs[0].id, {id: 111});

    });
}
chrome.tabs.onUpdated.addListener(function (id, info, tab) {
    if (info.status === 'complete') {
        chrome.browserAction.onClicked.removeListener(clickOnIssue);
        chrome.browserAction.onClicked.addListener(clickOnIssue);
        chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
            var _t = new Date().getTime();
            console.log("Request received for getProjectList(" + _t + ")");
            sendResponse({t: _t});
            return true;
        });

    }
});

content_script.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    console.log(request);
    //sendResponse({msg: 'received'});
    chrome.runtime.sendMessage({action: 'submitSettings'}, function (resp) {
        console.log('Received the message that user click on browserAction icon');
        updateProjectDropDown();
    });
    return true;
});

function updateProjectDropDown() {
    console.log('Request dispatch for getProjectList');
    chrome.runtime.sendMessage({action: 'getProjectList'}, function (resp) {
        console.log(resp.t + ': bootstrap.js JS received the message');
    });

}

This is browser's console

This is backgound js console

Edit: Add manifest file

Upvotes: 3

Views: 4267

Answers (1)

SKG
SKG

Reputation: 510

I think bellow code will solve your issue

chrome.runtime.onInstalled is run once so your listeners will not bind multiple times.

chrome.runtime.onInstalled.addListener(function (details) {
    chrome.browserAction.onClicked.addListener(clickOnIssue);
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
        //TODO: your code
    });
});

Upvotes: 7

Related Questions