Chrome擴展程序：popup.html通過contentscript.js動態創建

Question

我已閱讀Google的消息傳遞頁面，並且在StackOverflow上也閱讀了類似的問題。

我工作的完整源代碼位於google code。

我現在有一個contentscript.js插入網頁上的日期旁邊的鏈接，指示用戶谷歌的日曆事件創建頁面的日期/時間已經填寫完畢。

contentscript.js

/* 
* Copyright (c) 2010 Thomas Wolfe. All rights reserved. Use of this 
* source code is governed by a Simplified BSD license that can be found in the 
* LICENSE file. 
*/ 
/* 
* Regex Matches 
* 12/31/2002  | Dec 31, 2002 | December 31 2002 | 12-31-2002 | 2002/12/31 (ISO 8601) | 12/31/2002 20:00 | 12/31/2002 08:00 PM 
* Non-Matches 
* 12/31/02 | 15/12/2002 (day month year) | 2002/12/3 (needs a two digit day in this case to prevent breaking 2 digit day) 
*/ 
var regex = /(((([0]?[1-9]|1[0-2])|(Jan|January|Feb|February|Mar|March|Apr|April|May|Jun|June|Jul|July|Aug|August|Sep|September|Oct|October|Nov|November|Dec|December))(\/|-|\.| |,)([0-2]?[0-9]|3[0-1])(\/|-|\.| |,)([1-2]\d{3}))|(([1-2]\d{3})(\/|-|\.| |,)(([0]?[1-9]|1[0-2])|(Jan|January|Feb|February|Mar|March|Apr|April|May|Jun|June|Jul|July|Aug|August|Sep|September|Oct|October|Nov|November|Dec|December))(\/|-|\.| |,)([0-2]?[0-9]|3[0-1]){2}))((([0-1]?\d)|(2[0-3])):[0-5]\d)?(AM| am| PM| pm)?/ig; 
// Removes duplicate values from an array 
function unique(inputArray){ 
    var outputArray = new Array(); 
    o: for (var i = 0; i < inputArray.length; i++) { 
     for (var x = 0; x < outputArray.length; x++) { 
      if (outputArray[x] == inputArray[i]) 
       continue o; 
     } 
     outputArray[outputArray.length] = inputArray[i]; 
    } 
    return outputArray; 
} 

// Converts the given time into UTC, returns this in a string 
function getUTCDateString(y, m, d, h, min){ 
    var timeObj = new Date(y, m - 1, d, h, min); 
    var dateStr = "" + timeObj.getUTCFullYear(); 
    dateStr += stringPad(timeObj.getUTCMonth() + 1); 
    dateStr += stringPad(timeObj.getUTCDate()); 
    dateStr += "T" + stringPad(timeObj.getUTCHours()); 
    dateStr += stringPad(timeObj.getUTCMinutes()) + "00Z"; 
    return dateStr; 
} 

// Add a leading '0' if string is only 1 char 
function stringPad(str){ 
    var newStr = "" + str; 
    if (newStr.length == 1) { 
     newStr = "0" + newStr; 
    } 
    return newStr; 
} 

function getMonthByName(str){ 
    var newStr = "" + str; 
    var month; 
    switch (newStr) { 
     case "Jan": 
     case "January": 
      month = 1; 
      break; 
     case "Feb": 
     case "February": 
      month = 2; 
      break; 
     case "Mar": 
     case "March": 
      month = 3; 
      break; 
     case "Apr": 
     case "April": 
      month = 4; 
      break; 
     case "May": 
      month = 5; 
      break; 
     case "Jun": 
     case "June": 
      month = 6; 
      break; 
     case "Jul": 
     case "July": 
      month = 7; 
      break; 
     case "Aug": 
     case "August": 
      month = 8; 
      break; 
     case "Sep": 
     case "September": 
      month = 9; 
      break; 
     case "Oct": 
     case "October": 
      month = 10; 
      break; 
     case "Nov": 
     case "November": 
      month = 11; 
      break; 
     default: 
      month = 12; 
    } 
    return month; 
} 

function indiciesOfText(stringToSearch, searchFor) 
{ 
var regex = new RegExp(searchFor,"g"), result, indices = []; 
while ((result = regex.exec(stringToSearch))) { 
    indices.push(result.index+searchFor.length); 
} 
return indices; 
} 
function createLinkImg(dateStr) 
{ 
var dateImg = document.createElement("IMG"); 
dateImg.title = "Add this event to your Google Calendar"; 
dateImg.src = chrome.extension.getURL("Config-date-16.png") 
var dateLink = document.createElement("A"); 
dateLink.target = "_blank"; 
dateLink.href = "http://www.google.com/calendar/event?action=TEMPLATE&text=someevent&dates=" + dateStr + "&details=&location=&trp=false&sprop=&sprop="; 
dateLink.appendChild(dateImg); 
return dateLink; 
} 
function replaceText(dateStr, dateTxt, tobeReplacedNode) { 
dateLink = createLinkImg(dateStr); 
// if textNode search and replace 
if (tobeReplacedNode.nodeType == 3) { 
    if (tobeReplacedNode.textContent.search(new RegExp(dateTxt,"g")) != -1) { 
    var splitTxtNode = indiciesOfText(tobeReplacedNode.textContent,dateTxt); 
    for (var k = 0; k < splitTxtNode.length; k++) { 
    if (k == 0) { 
    var txtAfterOffsetNode = tobeReplacedNode.splitText(splitTxtNode[k]); 
    tobeReplacedNode.parentNode.insertBefore(dateLink, tobeReplacedNode.nextSibling); 
    } 
    else { 
    var txtAfterOffsetNode = txtAfterOffsetNode.splitText(splitTxtNode[k]-splitTxtNode[k-1]); 
    txtAfterOffsetNode.parentNode.insertBefore(dateLink, txtAfterOffsetNode.nextSibling); 
    } 
    } 
    } 
} 
if (tobeReplacedNode.hasChildNodes() && splitTxtNode == null) { 
    //recall this function 
    for (var j = 0; j < tobeReplacedNode.childNodes.length; j++) { 
    replaceText(dateStr, dateTxt, tobeReplacedNode.childNodes[j]); 
    } 
} 
//return tobeReplacedNode; 
} 
function getMonthDayYearHourMin(date) { 
var arraySplits = date.split(/(\/|-|\.| |, |:)/gi); 

// set time (hour/min) 
if (arraySplits.length > 5) { 
    hour = arraySplits[6]; 
    min = arraySplits[8]; 
    if (arraySplits.length > 9) { 
    ampm = arraySplits[10]; 
    if (ampm == "pm" | "PM") { 
    hour = 12 + parseInt(hour); 
    hour = hour.toString(); 
    } 
    } 
} 
else // no time provided, set to 00:00 
{ 
    hour = "00"; 
    min = "00"; 
} 
// if the year is not the first element day/year/month are in different locations 
if (arraySplits[0].length != 4 | (arraySplits[0] == "June" | "July")) { 
    year = arraySplits[4]; 

    if (parseInt(arraySplits[0]) > 12) { 
    if (arraySplits[2].length < 3) { 
    month = arraySplits[2]; 
    } 
    else { 
    month = getMonthByName(arraySplits[2]); 
    } 
    day = arraySplits[0]; 
    } 
    if (arraySplits[0].length < 3) { 
    month = arraySplits[0]; 
    } 
    else { 
    month = getMonthByName(arraySplits[0]); 
    } 
    day = arraySplits[2]; 
} 
else { 
    year = arraySplits[0]; 
    if (parseInt(arraySplits[2]) > 12) { 
    day = arraySplits[2]; 
    month = arraySplits[4]; 
    } 
    else { 
    month = arraySplits[2]; 
    day = arraySplits[4]; 
    } 
} 
return getUTCDateString(year, month, day, hour, min); 
} 
function replaceBody(date, bodyElement) { 
initDateString = getMonthDayYearHourMin(date); 
    dateString = initDateString + "/" + initDateString; 

replaceText(dateString, date, bodyElement); 
return dateString; 
} 

// Test the text of the body element against our regular expression. 
if (regex.test(document.body.innerText)) { 
    var bodyElement = document.getElementsByTagName("BODY")[0]; 
    var nonUniqueArrayDates = document.body.innerText.match(regex); // array of date/time values 
    var arrayDates = unique(nonUniqueArrayDates); 
var arrayDateStr = new Array(); 

// FIXME: ugly hack for this for loop to deal with issue 9 which I cannot figure out 
for (var i = 0; i < Math.min(arrayDates.length,20); i++) { 
    arrayDateStr.push(replaceBody(arrayDates[i], bodyElement)); 
} 
/* The regular expression produced a match, so notify the background page 
    * and send the array of dateStrings. 
    */ 
    chrome.extension.sendRequest({dates: JSON.stringify(arrayDateStr)}, function(response){ 
    }); 
} 
else { 
    // No match was found. 
} 

我也有contentscript發送到background.html頁的請求，以顯示page_action按鈕。

background.html：

<!DOCTYPE html> 
<!-- 
* Copyright (c) 2010 The Chromium Authors. All rights reserved. Use of this 
* source code is governed by a BSD-style license that can be found in the 
* LICENSE file. 
--> 
<html> 
    <head> 
    <script> 
     // Called when a message is passed. We assume that the content script 
     // wants to show the page action. 
     function onRequest(request, sender, sendResponse) { 
     // Show the page action for the tab that the sender (content script) 
     // was on. 
     chrome.pageAction.show(sender.tab.id); 
    var arrayDateStr = JSON.parse(request.dates); 
     // Return nothing to let the connection be cleaned up. 
     sendResponse({}); 
     }; 

     // Listen for the content script to send a message to the background page. 
     chrome.extension.onRequest.addListener(onRequest); 

    // Google Analytics, registers a view once per browser session 
    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-2551829-4']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = 'https://ssl.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 
    </script> 
    </head> 
</html> 

我現在正試圖創建一個包含所有日期的網頁上，並再次鏈接列表創建在用戶的日曆事件的popup.html 。

popup.html

<head> 
<style> 
body { 
    margin: 0px; 
    padding: 0px; 
} 
#cal { 
    width: 312px; 
    height: 312px; 
} 
</style> 
<script> 
function createLink(dateStr) 
{ 
var parElem = document.createElement("P"); 
var textNode = document.createTextNode(dateStr); 
var dateLink = document.createElement("A"); 
dateLink.target = "_blank"; 
dateLink.href = "http://www.google.com/calendar/event?action=TEMPLATE&text=someevent&dates=" + dateStr + "&details=&location=&trp=false&sprop=&sprop="; 
dateLink.appendChild(textNode); 
parElem.appendChild(dateLink); 
return parElem; 
} 
function cal() { 
    var arrayDateStr = chrome.extension.getBackgroundPage().arrayDateStr; 
    var cal = document.getElementById("cal"); 
    for(i=0; i<arrayDateStr.length; i++) 
    { 
    cal.appendChild(createLink(arrayDateStr[i])); 
    } 
} 
</script> 
</head> 
<body onload="cal()"> 
<p id="cal"></p> 
</body> 

出於某種原因 變種arrayDateStr = chrome.extension.getBackgroundPage（）arrayDateStr。 arrayDateStr似乎不曾被定義。

我現在只是很困惑，找不到任何我明白的例子。我想我需要做一些其他的消息傳遞，因爲我不認爲getBackgroundPage（）會知道它應該關聯哪個選項卡。

任何意見或建議，將不勝感激。謝謝。

Answer 1

我想通了，對不起，如果我浪費了任何人的時間。我不得不移動var arrayDateStr = null;在background.html中的onRequest函數之前希望這可以幫助未來的某個人。

非常微小的變化：

<!DOCTYPE html> 
<!-- 
* Copyright (c) 2010 The Chromium Authors. All rights reserved. Use of this 
* source code is governed by a BSD-style license that can be found in the 
* LICENSE file. 
--> 
<html> 
    <head> 
    <script> 
     var arrayDateStr = null; 
     // Called when a message is passed. We assume that the content script 
     // wants to show the page action. 
     function onRequest(request, sender, sendResponse) { 
     // Show the page action for the tab that the sender (content script) 
     // was on. 
     chrome.pageAction.show(sender.tab.id); 
     arrayDateStr = JSON.parse(request.dates); 
     // Return nothing to let the connection be cleaned up. 
     sendResponse({}); 
     }; 

     // Listen for the content script to send a message to the background page. 
     chrome.extension.onRequest.addListener(onRequest); 

     // Google Analytics, registers a view once per browser session 
     var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-2551829-4']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = 'https://ssl.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 
    </script> 
    </head> 
</html>