CODEWITHSUNDEEP
google-chrome
sunilrxg
sunilrxg

Reputation: 113

chrome extension send message from content script to

i have a chrome extension which dynamically create an iframe for each chrome tab and add button. from background.js i send message to content.js

chrome.tabs.sendMessage(tabs[0].id, {action: "load_ifram~"+id}, function(response) {});

content.js:

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
split_message = msg.action.split("~");
if (split_message[0] == 'load_ifram') {     
var id = split_message[1];
var height = '35';
var iframe = document.createElement('iframe');      
iframe.src = chrome.extension.getURL('toolbar1.html');
document.documentElement.appendChild(iframe);
}
});

toolbar1.html

<!DOCTYPE html>
<html>
<head>  
<script type="text/javascript" src="test.js"></script>
</head>
<body>
    <input type="text" name="value" id="value" value=""/>       
    <button id="p_button" style="float:right;line-height:15px;margin-top:-1px;font-family:century gothic;">Click ME</button>
</body>

test.js:

document.addEventListener('DOMContentLoaded', function () {
var p_status = document.querySelector('#p_button');
if(p_status ){  
    p_status.addEventListener('click', p_open);
}
});

In content.js i am getting id from background.js. this id should be the value for my button(Click ME+ id). Also I want to use to this id in my button click function(p_open()). How can i do this? please help!! Thanks in advance

Upvotes: 0

Views: 540

Answers (1)

sunilrxg
sunilrxg

Reputation: 113

Chrome provides chrome.storage through which we can pass values from the background script to content script and other js.

to implement this we need to update the manifest permisson first "permissions": [ "storage"]

//to set the storage in background script
chrome.storage.local.set({'id': myid}, function() {});
chrome.storage.local.set({'name': myname},function() {});

//retrive the storage value in other js file
chrome.storage.local.get('id', function (result) {
id= result.id;
});
chrome.storage.local.get('name', function (result) {
name= result.name;
});
chrome.storage.local.get('myname', function (result) {
myname= result.myname;
});

Upvotes: 1

Related Questions