Chrome拡張機能：popup.html contentscript.jsを介して動的に作成

Question

Googleのメッセージ受け渡しページを読んだことがあります。また、StackOverflowでも同様の質問があります。

私が取り組んでいることの完全な情報源はgoogle codeです。

私は、date/timeがすでに記入されているユーザーをGoogleのカレンダーイベント作成ページに誘導するウェブページ上の日付の隣にリンクを挿入します。

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はpage_actionボタンを表示するにはbackground.htmlページに要求を送信しています。

background.html：私は今のユーザーのカレンダーにイベントを作成するために、Webページと再びリンク上の日付のすべてのリストが含まれpopup.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> 

。 VAR arrayDateStr = chrome.extension.getBackgroundPage（）いくつかの理由

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。 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>