与循环中的chrome.tabs.create错误 [英] Bug with chrome.tabs.create in a loop
问题描述
在我的Chrome扩展程序复制所有Url 上，我们开发了一个粘贴功能来打开在剪贴板中找到的所有URL，每个URL有一个标签。
但此功能无法正常工作，有时可以正常工作，有时它只会打开它应该打开的所有URL的一小部分。
我怀疑Chrome API，更具体地说 chrome.tabs.create 对这个错误负责，所以我写了一小段代码来测试它：
popup.html：
<！doctype html>
< html>
< head>
< meta charset =utf-8>
< script type =text / javascriptsrc =vendor / jquery-1.7.2_min.js>< / script>
< script type =text / javascriptsrc =popup.js>< / script>
< / head>
< body>
< button id =actionTest>测试< /按钮>
< / body>
< / html>
popup.js：
jQuery（function（$）{
$（'＃actionTest'）。click（function（e）{
var urlList = [http ：//stackoverflow.com/， http://en.wikipedia.org/wiki/Main_Page， http://www.codinghorror.com/blog/， http://nodejs.org/ https://github.com/， http://wallbase.cc/， http://www.chromium.org/Home，http://www.photoshoptuto.com/?s =测试+铬+选项卡 http://www.youtube.com/， https://www.tumblr.com/， http://www.imdb.com/， HTTP： //www.flickr.com/\",\"http://kickass.to/\",\"https://www.dropbox.com/\",\"http://fr.slideshare.net/\",\"http： //www.deviantart.com/\",\"http://www.livejournal.com/\",\"http://ohnotheydidnt.livejournal.com/82624099.html\",\"http://www.etsy.com/ http://www.mediafire.com/， http://www.foxnews.com/， http://www.foxnews.com/politics/2013/10/21/obama-addresses -problems-with-health-care-website /];
$ .each（urlList，function（key，val）{
chrome.tabs.create（{url：val}，f unction（tab）{
// console.log（'openned：'+ tab.url）;
}）;
}）;
}）;
}）;
正如您所看到的，urlList包含22个URL，但是当我按下测试按钮时，我并不总是22个新选项卡打开。
有什么不对？
谢谢
我自己没有测试过（由于时间不够），但我相信问题是这样的：
问题
您正在创建 popup.js 。只要新选项卡获得焦点，弹出窗口（ popup.html ）就会关闭/隐藏，并停止任何JavaScript执行。这意味着将会有许多标签打开，因为在第一个标签获得焦点之前，许多 popup.js 管理创建之前。所以，有时它会是所有的，有时是一些等。
解决方案
解决方案是将在后台页面（或更好的事件页面）中创建制表符代码。例如：
// ...在popup.js
...
chrome.runtime中。 getBackgroundPage（function（bgPage）{
bgPage.openAllURLsInTabs（）;
}）;
...
（当然，可能有很多方法，例如消息传递等等）
演示
为了演示的目的，我放了一个小扩展，打开22个URL是新标签。为简单起见，它不包含弹出窗口，只是一个浏览器动作。
文件结构如下所示：
TestCX
| __background.js
| __jquery-1.7.2_min.js
| __manifest.json
background.js：
var urlList = [
http://stackoverflow.com/，
http://en.wikipedia.org/wiki/Main_Page，
http： //www.codinghorror.com/blog/，
http://nodejs.org/，
https://github.com/，
http：/ /wallbase.cc/，
http://www.chromium.org/Home，
http://www.photoshoptuto.com/?s=test+chrome+tabs，
http://www.youtube.com/，
https://www.tumblr.com/，
http://www.imdb.com/ ，
http://www.flickr.com/，
http://kickass.to/，
https://www.dropbox.com/，
http://fr.slideshare.net/，
http://www.deviantart.com/，
http：//www.livejournal.c om /，
http://ohnotheydidnt.livejournal.com/82624099.html，
http://www.etsy.com/，
http：// www.mediafire.com/，
http://www.foxnews.com/，
http://www.foxnews.com/politics/2013/10/21/obama- address-problems-with-health-care-website /
;
chrome.browserAction.onClicked.addListener（function（）{
$ .each（urlList，function（key，val）{
chrome.tabs.create（{url：val}，function （tab）{
console.log（Opened：+ tab.url）;
}）;
}）;
}）;
manifest.json：
{
manifest_version：2，
名称：粘贴所有网址，
version：2.5，
browser_action：{
default_title：粘贴很多网址
}，
background ：{
scripts：[
jquery-1.7.2_min.js，
background.js
]
}，
权限：[
标签
]
}
我希望这可以帮助您解决问题。如果不能再回来：）
On my Chrome extension Copy All Urls, I've developed a "paste" feature to open all URL found in the clipboard, with one tab per url.
But this feature doesn't works properly, sometime it works fine, sometimes it opens only a few subset of all URL that it should open.
I suspect Chrome API, and more specifically chrome.tabs.create to be responsible for this mistake, so I wrote a little piece of code to test it :
popup.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vendor/jquery-1.7.2_min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<button id="actionTest">Test</button>
</body>
</html>
popup.js :
jQuery(function($){
$('#actionTest').click(function(e){
var urlList = ["http://stackoverflow.com/","http://en.wikipedia.org/wiki/Main_Page","http://www.codinghorror.com/blog/","http://nodejs.org/","https://github.com/","http://wallbase.cc/","http://www.chromium.org/Home","http://www.photoshoptuto.com/?s=test+chrome+tabs","http://www.youtube.com/","https://www.tumblr.com/","http://www.imdb.com/","http://www.flickr.com/","http://kickass.to/","https://www.dropbox.com/","http://fr.slideshare.net/","http://www.deviantart.com/","http://www.livejournal.com/","http://ohnotheydidnt.livejournal.com/82624099.html","http://www.etsy.com/","http://www.mediafire.com/","http://www.foxnews.com/","http://www.foxnews.com/politics/2013/10/21/obama-addresses-problems-with-health-care-website/"];
$.each(urlList, function(key, val){
chrome.tabs.create({ url: val}, function(tab){
// console.log('openned: '+tab.url);
});
});
});
});
As you can see, urlList contains 22 URL, but when I press the test button I not always have 22 new tabs openned.
What's wrong ? Thanks
I haven't tested it myself (due to lack of time), but I believe that the problem is this:
The problem
You are creating the tabs from popup.js. As soon as a new tab receives focus, the popup (popup.html) is closed/hidden and any JavaScript execution stops. This means that there will be so many tabs opened as many popup.js managed to create before the first tab received focus. So, sometimes it will be all, sometimes some etc.
The solution
The solution is to mive the "tab-creating" code in the background page (or better yet event page). E.g.:
// ...in popup.js
...
chrome.runtime.getBackgroundPage(function(bgPage) {
bgPage.openAllURLsInTabs();
});
...
(Of course, there are many approaches possible, e.g. message-passing etc.)
The demo
For demonstration purposes, I have put together a tiny extension that opens your 22 URLs is new tabs. For simplicity, it does not feature a popup, just a browser-action.
The file structure is like this:
TestCX
|__background.js
|__jquery-1.7.2_min.js
|__manifest.json
background.js:
var urlList = [
"http://stackoverflow.com/",
"http://en.wikipedia.org/wiki/Main_Page",
"http://www.codinghorror.com/blog/",
"http://nodejs.org/",
"https://github.com/",
"http://wallbase.cc/",
"http://www.chromium.org/Home",
"http://www.photoshoptuto.com/?s=test+chrome+tabs",
"http://www.youtube.com/",
"https://www.tumblr.com/",
"http://www.imdb.com/",
"http://www.flickr.com/",
"http://kickass.to/",
"https://www.dropbox.com/",
"http://fr.slideshare.net/",
"http://www.deviantart.com/",
"http://www.livejournal.com/",
"http://ohnotheydidnt.livejournal.com/82624099.html",
"http://www.etsy.com/",
"http://www.mediafire.com/",
"http://www.foxnews.com/",
"http://www.foxnews.com/politics/2013/10/21/obama-addresses-problems-with-health-care-website/"
];
chrome.browserAction.onClicked.addListener(function() {
$.each(urlList, function(key, val) {
chrome.tabs.create({ url: val }, function(tab) {
console.log("Opened: " + tab.url);
});
});
});
manifest.json:
{
"manifest_version": 2,
"name": "Paste All URLs",
"version": "2.5",
"browser_action": {
"default_title": "Paste many URLs"
},
"background": {
"scripts": [
"jquery-1.7.2_min.js",
"background.js"
]
},
"permissions": [
"tabs"
]
}
I hope this helps you solve your problem. If not come back for more :)
这篇关于与循环中的chrome.tabs.create错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
