Question

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

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

我已阅读cross-origin extension documentation，我相信我已正确配置了我的清单文件。它如下：

{
  "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适用于我有权访问的服务器上的某些测试代码。解决服务器差异的结果（有效）和扩展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();

Dropbox集成了Chrome扩展程序

0 个答案: