我有一个todo列表 Chrome extension,其中所有代码都在内容中. background.js中没有任何内容 – 主要是因为我还将此应用程序部署为 standalone website.

点击扩展程序的浏览器操作和弹出式渲染之间有2到3秒的延迟.我相信这是因为Chrome在显示弹出窗口之前等待很多JS运行之前.

奇怪的是,当我打开应用程序作为标签时,它立即加载(它不是一个特别沉重的JS应用程序！)它只显示弹出窗口的大量延迟.

如果没有从根本上改变我的扩展的架构,有没有办法我可以获得一些快速的胜利来提高弹出窗口的加载性能？我能推迟什么？

这是我的manifest.json文件：

"background": {
  "page": "index.html"
},"browser_action": {
  "default_icon": {   
    "19": "img/icon19.png","38": "img/icon38.png"
  },"default_title": "Super Simple Tasks","default_popup": "index.html?popup=true"
}

该应用程序在$(document).ready中做了一些事情：在正文上设置一个类,将一些东西放入控制台,检查存储类型,并检查我们是否有互联网连接.

注意：如果您更喜欢在每次加载时运行的JavaScript,here is the compiled JS code.除了我在下面提到的内容之外,还有更多内容.

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  checkOnline()

  $new_task_input = $('#new-task')
  $link_input = $('#add-link-input')

  initialize()

初始化然后设置应用程序：它获取任务数组并检查它是否为空,它向Google Analytics发送事件,在必要时从旧版本运行迁移,显示任务,并执行一些DOM操作.

initialize = ->

    window.storageType.get DB.db_key,(allTasks) ->

      if allTasks == null
        allTasks = Arrays.default_data
        window.storageType.set(DB.db_key,allTasks)

      ga 'send','hitType': 'event'
      'eventCategory': 'Data'
      'eventAction': 'Task count'
      'eventValue': allTasks.length

      Migrations.run(allTasks)

      Views.showTasks(allTasks)

      $new_task_input.focus()

      setTimeout (->
        $('#main-content').addClass('content-show')
      ),150

所以事实证明checkOnline()方法在返回并阻止弹出窗口的渲染时会花费一些时间.这是Coffeescript中的checkOnline()方法：

checkOnline = ->
  online = navigator.onLine
  return online

解决方案是将此(以及依赖它的另一个方法)置于超时中,以便JS的其余部分可以运行并停止阻止弹出窗口显示：

$(document).ready ->

  setPopupClass()

  standardLog()

  checkStorageMethod()

  window.tourRunning = false

  document.onkeydown = keyboardShortcuts

  tour = createtour() # This is badwrong

  initialize()

  setTimeout (->

    checkOnline()

    changeEmptyStateImage(online)

  ),100

我正在尝试在Chrome扩展程序中下载多个文件.以下代码创建指向文件的虚拟链接,然后触发下载文件的.click()事件.
问题是只有第一个.click()事件才会触发下载.后续的.click()事件将被忽略.

这里的manifest.json：

{
  "name": "Simple File Downloader","version": "0.1","permissions": ["contextMenus","http://*/"],"background": {
    "persistent": false,"scripts": ["sample.js"]
  },"content_security_policy": "script-src 'self'; object-src 'self'","manifest_version": 2
}

这里是sample.js：

function onClickHandler(info,tab) {
    var a = document.createElement('a');
    a.href = 'http://or.cdn.sstatic.net/chat/so.mp3';
    a.download = 'so.mp3';
    document.body.appendChild(a);
    a.click(); // this click triggers the download
    // this timeout violates content security policy
    // setTimeout(a,300); 
    a.click(); // this click doesn't do anything
    document.body.removeChild(a);

    a = document.createElement('a');
    a.href = 'http://or.cdn.sstatic.net/chat/so.mp3';
    a.download = 'so.mp3'; 
    document.body.appendChild(a);
    a.click(); // this click doesn't do anything either
    document.body.removeChild(a);
};

chrome.contextMenus.onClicked.addListener(onClickHandler);
chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({"title": "Download File","id":"download_file"});
});

我试过了：

>使用FileSaver.js在Chrome Extension write to file system中描述的下载文件的不同方法,结果完全相同,第一个文件被下载,第二个文件没有
>如Is it possible to make two .click method calls in javascript所述添加超时,导致内容安全策略违规,我试图使用Content-Security-Policy error in google chrome extension making中描述的方法解决,但没有成功
>使用JQuery click event works only once中描述的jQuery .live方法,也没有成功,但我并不是100％确定我正确地实现了这个(如果人们认为这种方法应该解决它,可以稍后发布代码)

很惊讶为什么简单地保存多个文件很难.感谢任何帮助.

诀窍不是使用element.click方法而是创建多个MouseEvent.为此,您需要在每次需要单击时创建一个MouseEvent.

function clicker(el,clickCount) {
  var mousedownEvent;
  while(clickCount--) {
    mousedownEvent = document.createEvent("MouseEvent");
    mousedownEvent.initMouseEvent("click",true,window,null,false,null);
    el.dispatchEvent(mousedownEvent);
  }
}

clicker(a,3);
// your anchor 'a' gets clicked on 3 times.

但是,在Chrome中使用此方法时,您会收到来自浏览器的警告,询问“此网站正在尝试下载多个文件.您要允许此操作吗？[拒绝] [允许]”.因此,如果您在扩展程序的后台页面中执行此操作,则后台页面会收到警告,用户无法看到它,因此用户无法单击“允许”.

(粗略/讨厌)解决方法是创建一个“点击”锚点的选项卡.像这样的东西：

function _anchorDownloader(url,filename) {
  var timeout = 500;
  return 'javascript:\'<!doctype html><html>'+
    '<head></head>' +
    '<script>' +
      'function initDownload() {'+
        'var el = document.getElementById("anchor");'+
        'el.click();' +
        'setTimeout(function() { window.close(); },' + timeout + ');' +
      '}'+
    '</script>' +
    '<body onload="initDownload()">' +
      '<a id="anchor" href="' + url + '" download="'+ filename + '"></a>'+
    '</body>' +
    '</html>\'';
};

function downloadResource(info,tab) {
  // ...
  chrome.tabs.create( { 'url' : _anchorDownloader( url,filename ),'active' : false  } );
  // ...
}

chrome.contextMenus.create({"title": "Save Image…","contexts":["image"],"onclick": downloadResource });

为此,扩展必须将“tabs”作为manifest.json中的权限.您可以调整超时以关闭选项卡,但是,如果您关闭它太快,则不会发生下载.