jqueryダイアログを開き、現在のWebサイトについてユーザーに尋ねるChrome拡張機能を構築しています。
これが私がこれまでに行ったことです
background.html
<html>
<head>
<script>
var tabUrl='';
chrome.browserAction.onClicked.addListener(function(tab) {
tabUrl=tab.url; //this varible i want to pass to popup.js
chrome.tabs.executeScript(null,
{file:"jquery-ui.css",
runAt:"document_start"},
function() { });
chrome.tabs.executeScript(null,
{file:"jquery.js",
runAt:"document_start"},
function () {
chrome.tabs.executeScript(null,
{file:"jquery-ui.min.js"},
function () {
chrome.tabs.executeScript(null, {file:"popup.js"}, function() {
});
});
});
});
</script>
<script ></script>
</head>
</html>
popup.js
$(function() {
var myurl='http://localhost/addReview.php?url='+tabUrl;
var NewDialog = $('<div id="MenuDialog" ><iframe id="loader" frameborder="0" style="height:400px;width:100%" src="'+myurl+'"></iframe></div>');
NewDialog.dialog({
modal: true,
title: "Curate to WishCart",
show: 'clip',
hide: 'clip',
width: '744'
});
});
別の方法で popup.js コードを background.html にコピーしてみましたが、拡張コンソールに次のエラーが表示されました。
未定義シンボル $
キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にはメソッド 'dialog' がありません
tabUrl を popup.js に渡したいので、i-frame をロードして現在のタブの URL を iframe src 属性で送信できます。