Chrome扩展程序 - 注入的iframe无法访问Chrome浏览器动作或chrome.tabs或AngularJS [英] Chrome Extension - Injected Iframe not accessing Chrome browserAction or chrome.tabs or AngularJS
问题描述
我有一个Chrome扩展程序，可以通过浏览器操作点击来切换侧边栏。侧边栏包含带有本地（Chrome扩展程序）源的iframe。我认为iframe中的页面会被视为本地chrome扩展文件，可以开放访问chrome API等。但是，我在 web 控制台中一直收到以下错误：
I have a chrome extension that toggles a sidebar with the browser action click. The sidebar contains an iframe with a local (chrome extension) source. I thought the page within the iframe would be considered a local chrome extension file with open access to the chrome APIs and etc. However, I keep getting the following errors in the web console:
Uncaught TypeError：无法读取未定义的属性'onClicked'< - background.js
Uncaught TypeError: Cannot read property 'onClicked' of undefined <-- background.js
TypeError：无法读取属性'查询'of undefined< - sidebar.js
TypeError: Cannot read property 'query' of undefined <-- sidebar.js
如何获取它以便使用上下文脚本注入的iframe可以访问本地chrome环境？
How do I get it so that the iframe injected with a context script has access to the local chrome environment?
以下代码：
sidebar.js：
var myApp = angular.module('PlaceMates', []);
myApp.service('pageInfoService', function() {
this.getInfo = function(callback) {
var model = {};
chrome.tabs.query({
'active': true, // Select active tabs
lastFocusedWindow: true // In the current window
},
function (tabs) {
if (tabs.length > 0)
{
model.title = tabs[0].title;
model.url = tabs[0].url;
chrome.tabs.sendMessage(tabs[0].id, { 'action': 'PageInfo' }, function (response) {
model.pageInfos = response;
console.log("popup js: " + model.pageInfos);
callback(model);
});
}
});
};
});
myApp.controller("PageController", function ($scope, pageInfoService) {
$scope.message = "This extension identifies the photos on this page!";
pageInfoService.getInfo(function (info) {
$scope.title = info.title;
$scope.url = info.url;
$scope.pageInfos = info.pageInfos;
$scope.place_name = info.place_name;
$scope.$apply();
});
});
background.js
console.log( 'Background.html starting!' );
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log('Toggling sidebar on ' + tab.url);
// send message to current tab when clicked
var tabId = tab.id;
console.log("tab.id: " + tabId);
chrome.tabs.query({active: true, currentWindow: true}, function(tab) {
chrome.tabs.sendMessage(
//Selected tab id
tabId,
//Params inside a object data
{callFunction: "toggleSidebar"},
//Optional callback function
function(response) {
console.log(response);
}
);
});
console.log('Done toggling sidebar!');
});
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if(request.cmd == "read_file") {
$.ajax({
url: chrome.extension.getURL("sidebar.html"),
dataType: "html",
success: sendResponse
});
}
})
chrome.runtime.onMessage.addListener(
function(msg, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (msg.command == "read_info"){
console.log(JSON.parse(JSON.stringify(msg.myInfo)));
sendResponse({command: "done"});
}
}
);
console.log( 'Background.html done.' );
推荐答案
唯一可以访问所有<$ c的页面$ c> chrome。* 扩展程序API是在扩展程序来源和Chrome扩展程序中运行的网页。
The only pages that have access to all chrome.* extension API are pages that are run at the extension's origin and within the Chrome extension process.
当扩展程序页面嵌入在iframe中，其扩展运行时相当于内容脚本：该页面只能使用跨源XMLHttpRequest和一些扩展API（消息以及 chrome中的其他一些方法.runtime / chrome.extension 名称空间）。
When an extension page is embedded in an iframe, its extension runtime is equivalent to a content script: The page can only use cross-origin XMLHttpRequest and some of the extension APIs (messaging and some other methods in the chrome.runtime / chrome.extension namespace).
如果您希望将其他Chrome API的功能用于您的iframe，那么您必须将这些称为来自背景页，并使用消息传递API 代理从iframe到后台页面并返回的请求。幸运的是，大多数Chrome扩展API在设计上都是异步的，因此更改代码以使用这些代理并不困难。
If you wish to make the functionality of the other Chrome APIs available to your iframe, then you have to call these APIs from the background page, and use the messaging API to proxy requests from the iframe to the background page and back. Luckily, most of the Chrome extension API is asynchronous by design, so it will not be difficult to change your code to use these proxies.
这篇关于Chrome扩展程序 - 注入的iframe无法访问Chrome浏览器动作或chrome.tabs或AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
