谷歌瀏覽器擴展框架內的訪問元素

我正在開發一個Chrome瀏覽器擴展，當用戶點擊瀏覽器動作按鈕時，一個新的選項卡應該打開那裏的屏幕應該使用框架分裂。在框架內我有文本框以及iframe。文本框會像url欄一樣，當用戶在文本框中輸入url時，我會更新iframe的內容。谷歌瀏覽器擴展框架內的訪問元素

這裏是我的實際問題，當用戶點擊iframe中的任何鏈接時，我必須更新url欄，但我無法爲iframe中的鏈接添加事件偵聽器，問題是我無法訪問iframe中的元素，我得到錯誤爲「不安全的JavaScript嘗試訪問URL ......從框架....」。

這個頁面是Chrome擴展標籤頁，如果是其他頁面，我可以注入內容腳本來在框架內添加事件監聽器，所以我不能在這裏使用內容腳本。

的事情，我試過，但沒有工作： I）的manifest.json我添加的權限爲「權限」：「標籤」，的「http：// /」，「HTTPS： // /「 ] 但無效。二）試圖--allow-文件訪問從檔案的Chrome瀏覽器，但沒有奏效

來源

2011-11-25 kalai selvan

您不需要將腳本注入html文件裏面的的擴展名。從這些，你將能夠從頁面腳本訪問鉻。* API。這就是說，如果iframe和帶有文本框的框架位於不同的域中，則由於跨站點腳本安全性阻止了它，所以不能從另一個域訪問它。

我需要看到更多的你已經有了HTML文件，但你也許能夠做這樣的事......

在擴展選項卡（包含文本框）：

chrome.extension.onRequest.addListener(function (response) { 
    if (response.type === "urlUpdate") { 
     document.getElementById("addressBar").value = response.url; 
    } 
});

在後臺頁面：

chrome.extension.onRequest.addListener(function(request, sender) { 
    if (request.type === "urlUpdate") { 
     chrome.tabs.sendRequest(sender.tab.id, {type: "urlUpdate", url: request.url}); 
    } 
});

最後，內容腳本在http://*和https://*運行。請確保你在你的清單（將其添加到內容腳本的現有列表）有這樣的：

"content_scripts": [ 
    { 
     "matches": ["http://*/*", "https://*/*"], 
     "js": ["address.js"], 
     "all_frames": true 
    } 
];

這是你有all_frames設置爲true拿到腳本的iframe內運行重要。

然後，你必須在這個address.js：

if (window.top !== window) { 
    chrome.extension.sendRequest({type: "urlUpdate", url: location.href}); 
}

基本上，window.top檢查只能由從iframe內的網址發送更新消息避免混淆。您可能需要更多篩選，以防止它在您不想要的其他頁面上運行。

這是未經測試的，但我相當確信這種解決方案是可行的。

來源

2011-11-25 14:44:08 Jeremy

可以使用content script爲click事件監聽器，當用戶點擊一個新的鏈接使用window.postMessage到將新網址傳遞給iframe。

來源

2011-11-25 14:20:26 abraham

其實，從@abraham給出的答案開始，我認爲你可以做到這一點。

在擴展選項卡（帶有地址欄）：

window.addEventListener("message", function(msg) { 
    document.getElementById("addressBar").value = msg.data; 
}, false);

在address.js：

if (window.top !== window) { 
    window.top.postMessage(location.href, chrome.extension.getURL("")); 
}

你不會需要在後臺頁面什麼。

來源

2011-11-25 14:52:15 Jeremy

谷歌瀏覽器擴展框架內的訪問元素

回答

相關問題