Working with multiple HTML files in Chrome extension
I have the following question: I am writing a chrome extension that works with context menu over text selection. one of the things that I want to do is to create a new tab that is based on one of my html files that I create dynamically using the data I received at the text selection.how do I communicate between my javascript file that is connected to my background.html and my other html file in order to get to its' DOM and alternate it's contents?
my manifest.json:
{
"name": "My flickr Extension",
"version": "1.0",
"description": "The first extension that I made.",
"icons": {
"16": "icon.png"},
"background_page":"background.html",
"permissions": ["tabs",
"http://api.flickr.com/","contextMenus","http://*/*","https://*/*"
]
}
my background.html:
<script src="ext.js"></script>
my ext.js main functions:
function searchSelection(info,tab){
var updated=makeNewString(info.selectionText);
var xhReq = new XMLHttpRequest();
xhReq.open(
"GET",
"http://api.flickr.com/services/rest/?method=flickr.photos.search&text="+updated+"&api_key=a0a60c4e0ed00af8d70800b0987cae70&content_type=1&sort=relevance",
true);
xhReq.onreadystatechange = function () {
if (xhReq.readyState == 4) {
if (xhReq.status == 200) {
var photos = xhReq.responseXML.getElementsByTagName("photo");
var urlOfNew=chrome.extension.getURL('results.html');//this is me getting the li开发者_运维百科nk of the other html page that i want to update
//here I want to manipulate the results.html DOM like adding images depending on the photos and other stuff
chrome.tabs.create({"selected":true,"url":urlOfNew});
}
};
};
xhReq.send(null);
}
var context="selection";
var id = chrome.contextMenus.create({"title": "search Flickr", "contexts":[context],"onclick":searchSelection});
Take a look at Message Passing, http://code.google.com/chrome/extensions/messaging.html, it has detailed examples on how to send messages from Content Script to Extension Page.
Since you are just communicating in the same page (background page), why are you having any trouble? You can just use normal JavaScript to pass variables around.
精彩评论