1

几天来，我正试图弄清楚如何使用 AngularJS 制作我正在构建的 chrome 扩展。问题是我无法成功访问远程资源；只要我不使用角度，我在主 html 和沙箱之间进行通信的方式就是使用我在 web pkg.js上找到的 pub/sub javascript ，这样我就可以在 main.js 中调用外部 url并将检索到的数据传回订阅的 javascripts。

我已经大大简化了我的代码，以便您可以更好地理解架构。这里有一些测试资源可以完美地工作，除了这个事实......角度不起作用：/

我的清单有以下相关部分：

{
...
"background": {
 "scripts": ["new/ext/background.js"],
 "persistent": false
},
"permissions": [
 "tabs",
 "http://*.mysite.com/*"
],
"sandbox": {
 "pages": [ "new/testmain.html" ]
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

我的 background.js 非常简单：它只是创建一个选项卡并调用一个 html 来托管 Angular 代码：

chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.create({'url': chrome.extension.getURL('/new/main.html')}, function (tab) {     });
});

main.html 也很简单：只包含一些脚本和 iframe：

<!doctype html>
<html>
<head>
  <title>Testing angular</title>

  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>

  <!-- custom scripts -->
  <script type="text/javascript" src="/lib/pkg.js"></script>

</head>
  <body style="height: 100%">
  <h1>Iframe below</h1>
  <iframe id="iframe" src="testmain.html" width="100%" height="100%" frameborder="none"></iframe>

  <script type="text/javascript" src="testmain.js"></script>

</body>
</html>

testmain.js 只是订阅一个事件，如果收到它，它会发布虚拟数据：

iframe = document.getElementById("iframe");
$.pkg.init(iframe.contentWindow);

$.pkg.listen("items", function () {
  console.log("[testmain.js] received items message");
  items = [
      { name:"foo", age: 12 },
      { name:"bar", age: 11 },
      { name:"mickey", age: 15},
      { name: "donald", age: 27}
  ];
  $.pkg.send("response", [items]);
  console.log("[testmain.js] sent response");
});

现在让我们来到testmain.html：

<!DOCTYPE html>
<html data-ng-app="App" data-ng-csp>
<head>
  <title></title>
</head>
<body ng-controller="TodoCtrl">
  <div ng-repeat="item in testitems">
    <ul>
      <li>{{item.name}}</li>
    </ul>
  </div>
  <script type='text/javascript' src="lib/jquery.min.js"></script>
  <script type="text/javascript" src="lib/angular.min.js"></script>
  <script src="/lib/pkg.js"></script>
  <script src="app/testapp.js"></script>
</body>
</html>

最后，这是 testapp.js：

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope) {

  //test
  $.pkg.init(window.top);
  $.pkg.send("items");
  console.log("[testapp.js] sent message items");
  $.pkg.listen("response", function(res){
    console.log("[testapp.js] received " + res.length + " items");
    $scope.testitems = res;
    for (i = 0; i < $scope.testitems.length; i++) {
       console.log("[testapp.js] testitem: " + $scope.testitems[i].name);
    }
  });
});

控制器只是初始化与包含 iframe 的destination = html 的通信。然后它发送一条请求数据的消息，然后将其发回（侦听）。

如果我尝试从控制台运行任何手动命令来获取 $scope 变量，则根本没有成功：

document.getElementById('iframe')
Sandbox access violation: Blocked a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb" from accessing a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb".  The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.
Sandbox access violation: Blocked a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb" from accessing a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb".  The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.
Sandbox access violation: Blocked a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb" from accessing a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb".  The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.
<iframe id="iframe" src="testmain.html" width="100%" height="100%" frameborder="none"></iframe>

这是控制台中发生的事情：

[testapp.js] sent message items testapp.js:8
[testmain.js] received items message testmain.js:5
[testmain.js] sent response testmain.js:13
[testapp.js] received 4 items testapp.js:10
[testapp.js] testitem: pippo testapp.js:13
[testapp.js] testitem: pluto testapp.js:13
[testapp.js] testitem: paperino testapp.js:13
[testapp.js] testitem: minnie testapp.js:13

您可能会注意到，确实会发生通信， $scope.testitems 变量设置正确。但是 iframe 上没有呈现任何内容:(

谁能帮我弄清楚如何摆脱这一切？

顺便说一句，我在某种程度上被迫这样做 - plnkr 上的第一个版本很乐意在控制器内使用 $http ，但这似乎在 chrome 扩展中被禁止......我也尝试使用 amplifyjs 但没有t出来使 iframe 和它的容器之间的通信工作。

非常感谢！

4

0 回答 0