我的chrome扩展弹出窗口在几秒钟后打开,与其他扩展相比速度很慢

时间:2014-10-09 11:05:30

标签: google-chrome google-chrome-extension popup

当我们点击地址栏旁边列出的extension button(显示网址的位置)时,会显示相应扩展程序的popup.html。 (当然,根据manifest.json

当我点击lastPass时,会立即显示弹出窗口,但是当我点击我的自定义扩展程序(只包含popup.html)时,鼠标图标会变为加载1-2秒&弹出窗口打开了。

为了解释为什么我的弹出窗口速度如此之慢,google-groups有点像

window.load=setTimeout(activate,0);

无法找到任何相关文档或工作样本。

请帮助弄清楚为什么我的扩展弹出窗口速度太慢,尽管代码中只包含弹出窗口(chrome-extensions开发中的初学者)。

更新

的manifest.json

{
  "manifest_version": 2,

  "name": "Sample Name",
  "description": "Sample Descriptoin",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "<all_urls>"
  ]
}

popup.html

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div>
            <label>Enter HR Password</label>
            <input type='password' id='passwd'/>
            <button id='evaluateResults'>Evaluate</button>
            <ul id='results' style='width:100px;'>

            </ul>
        </div>
        <script src='popup.js'></script>
    </body>
</html>

popup.js

var totalCorrect=0, totalWrong=0;

document.getElementById('evaluateResults').addEventListener('click',function(){
    var passwd=document.getElementById('passwd').value;
    if(passwd==='123'){     
        var strCode="var scriptOptions = {role:'blank'};";
        chrome.tabs.executeScript(null, {code: strCode,allFrames:true}, function(){
            chrome.tabs.executeScript(null, {file: "content_script_evaluate.js",allFrames:true});       
        });
    }else{
        alert("Incorrect Password");
    }
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log(request);
    var ul=document.getElementById('results');
    var li=document.createElement('li');
    li.innerHTML=request.testName+" - "+(request.testResult?"Correct":"Wrong");
    ul.appendChild(li);
});

1 个答案:

答案 0 :(得分:24)

有用的是添加空背景页面。 这在谷歌文档中没有解释(或者至少我没有找到它),所以它更像是一个侥幸,但似乎有效。

这个想法是当你来到页面时插件被加载一次(所以在你点击之前),而不是在每次点击时反复重新加载。

在清单中添加如下内容:

{
  //...
  "background": {
    "page": "bg.html"
  }
  //...
}

bg.html只能是一个空的HTML文件:

<html>

</html>

再次 - 从来没有找到明确的链接或资源来解释为什么要这样做,我不确定这是最好的做法,但它确实对我有用。