使用Chrome扩展程序中的多个HTML文件

时间:2011-02-15 12:43:06

标签: html google-chrome-extension

我有以下问题: 我正在编写一个chrome扩展,它与文本选择的上下文菜单一起使用。我想要做的事情之一是创建一个新的选项卡,它基于我的一个html文件,我使用我在文本选择中收到的数据动态创建。我是否在连接到我的javascript文件之间进行通信我的background.html和我的其他html文件是为了获取它的'DOM并替换它的内容?

我的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://*/*"  
  ]
}

我的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 link 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});

1 个答案:

答案 0 :(得分:1)

看一下Message Passing,http://code.google.com/chrome/extensions/messaging.html,它有关于如何从内容脚本向扩展页面发送消息的详细示例。

由于您只是在同一页面(背景页面)进行通信,为什么遇到任何问题?您可以使用普通的JavaScript来传递变量。