1

我正在尝试使用保护程序 api 将文件从 chrome 扩展上传到保管箱。但是，当保存程序窗口加载时，GUI 中不会显示任何文件。单击保存或取消不会执行任何操作。更重要的是（我认为），控制台在后台抛出以下消息：

无法将消息发布到 chrome-extension://[chrome extension ID]。收件人来自https://www.dropbox.com。

我已经阅读了跨域扩展文档，并且我相信我的清单文件配置正确。如下：

{
  "name": "Pic Grabber",
  "version": "2.0",
  "permissions": [
    "activeTab",
    "tabs", "<all_urls>", "background", 
    "http://*/*", 
    "https://*/*", 
    "http://*", 
    "https://*"
  ],
  "content_scripts": [{
        "js": ["grabber.js"],
        "matches": ["http://*/*", "https://*/*"]
    }],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Download pictures from this page.",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' https://www.dropbox.com/static/api/1/dropins.js; object-src 'self'"
}

我已经验证了 dropin 在我可以访问的服务器上的一些测试代码上工作。服务端 diff 和扩展 GET 请求的相关结果如下：

Server:
Request URL:https://www.dropbox.com/saver?origin=[SERVER'S ORIGIN]&app_key=[APP KEY]
Extension:
Request URL:https://www.dropbox.com/saver?origin=chrome-extension[CHROME EXTENSION ID]&app_key=[SAME APP KEY]

Server:
referer:[PATH TO TEST HTML FILE ON SERVER]
(No referer on Extension)

Server:
url:/saver?origin=http%3A%2F%2Fwww.uvm.edu&app_key=7tvbf4mpgd2v56z
Extension:
url:/saver?origin=chrome-extension[CHROME EXTENSION ID]&app_key=[APP KEY]

Server:
origin:[SERVER DOMAIN]
Extension:
origin:chrome-extension://[CHROME EXTENSION ID]

我的扩展弹出窗口的 html 如下：

<!doctype html>
<!-- used to display the images found by the scripts and offer a save to dropbox button -->
<html>
  <head>
    <title>PicGrabber</title>
  </head>

  <body>
    <h3>Download the following pictures:</h1>
    <hr>
    <div id="btn-container"></div>
    <script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="[KEY]"></script>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

（popup.js 是我的内容脚本的来源，它执行扩展的大部分工作。这个脚本似乎工作正常，但如果我能提供帮助，我也很乐意发布它）。

恐怕我不确定错误的确切位置。似乎不知何故，Dropbox API 无法与扩展程序正确通信，导致格式错误的弹出窗口无法与 Dropbox 服务器通信。

任何正确方向的提示/指针将不胜感激。谢谢！

编辑：我已将 popup.js 代码添加到这篇文章中，希望它会有所帮助-

/**
    This is the popup.js file, used to receive the list of urls that the grabber content script has found and expose them to the popup.html file.
**/

function get_urls() {
  var picUrls = chrome.extension.getBackgroundPage().IMAGE_URLS;
  if (picUrls){
    console.log("The popup.js is working")

    // create a container object for the list
    var listContainer = document.createElement("div");  
    // add it to the DOm
    document.getElementsByTagName("body")[0].appendChild(listContainer);
    // create a ul object for the list items
    var listElement = document.createElement("ul");
    // add that to the DOm
    listContainer.appendChild(listElement);

    saveThese = []

    // loop through the urls, and append them to the ul object
    for (var i = picUrls.length - 1; i >= 0; i--) {
      var listItem = document.createElement("li");
      // listItem.innerHTML = "<a href='" + picUrls[i].src +"'>" + picUrls[i].name + "</a><img src='" + picUrls[i].src + "'width=25%, height=25%></img>";
      listItem.innerHTML = "<img src='" + picUrls[i].src + "'width=25%, height=25%></img>";
      listElement.appendChild(listItem);

      saveThese.push({
        'url':picUrls[i].src,
        'filename':picUrls[i].name
      });
    }

    // create dropbox saver dropin
    options = {
      files: saveThese,
      success: function() {},
      progress: function(progress) {},
      cancel: function() {},
      error: function(errmsg) {}
    } // end options
  }

  Dropbox.createSaveButton(options);
  var btn = Dropbox.createSaveButton(options);
  document.getElementById('btn-container').appendChild(btn); 
}

window.onload = get_urls();
4

0 回答 0