Develop Reference

What does tabs[0] mean in browser extensions?

In the Firefox example of browser extensions, the popup script sends a message to the content script using the following:
browser.tabs.sendMessage(tabs[0].id, {
command: "beastify", beastURL: url }
Looking through the MDN documentation doesn't give a clear cut answer as to what tabs really is. It seems like its an array containing all the tab objects in the browser. But how do I know what tabs[0] is? and what about the rest of the array?
Is using tabs[0] equivalent to finding the current active tab?

This is from Firefox documentation
browser.tabs
.query({ active: true, currentWindow: true })
.then(beastify)
....
function beastify(tabs) {
browser.tabs.insertCSS({ code: hidePage }).then(() => {
let url = beastNameToURL(e.target.textContent);
browser.tabs.sendMessage(tabs[0].id, {
command: "beastify",
beastURL: url
});
});
}
As you can see the beastify function is called with list (array) of tabs from browser.tabs.query()
Because only one tab in the same window can be active, it's save to say that the list will contain only single item, hens we can safely use tabs[0] to access first and only item in the array.

Getting active tab information using chrome extension api

I am working on a chrome extension, and I need information about the active tab (when I say "active", I mean the tab that I am looking at in the current window that is focused).
Using the chrome.tabs api, I should be able to do something like the following to get what I want:
function getActiveTab() {
var activeTabInfo = {"currentWindow": true, "active" : true};
return chrome.tabs.query(activeTabInfo,function (tabs) {
return tabs[0];
});
}
However, when I log the length of tabs within the callback, I'm getting a length of 0. I modeled this snippet after How to fetch URL of current Tab in my chrome extension using javascript, but can't seem to get it to work.
Any thoughts?

Debugging source files using chrome extension

I am trying to control the debugger using Chrome Extension.
I am using devtools-protocol and chrome extension documentation, but I have no idea how to implement them as I have not seen any samples of the methods in use. I used the sample extension from here which shows how to pause and resume the debugger only, but that's absolutely no use to me. I tried to implement some methods in the sample, but nothing happens.
function onDebuggerEnabled(debuggeeId) {
chrome.debugger.sendCommand(debuggeeId, "Debugger.setBreakpointByUrl", {
lineNumber: 45825,
url: 'full https link to the js file from source tab'
});
}
The problem is that the js file I am trying to debug is loaded from the website inside the sources tab and it's huge, we talking 150k+ lines after its been formatted and it takes some time to load.
Now can anyone tell me how to simply add a break point inside the js file from the sources (USING CHROME EXTENSION) so it could be triggered on action which will then stops the debugger so I could change values etc?

Maybe you are placing wrong breakpoint location (formatted source), try working with original source and add columnNumber: integer
and here working version JavaScript pause/resume -> background.js:
install this extension
open https://ewwink.github.io/demo/Debugger.setBreakpointByUrl.html
click debugger pause button
click button "Debug Me!"
it will hit breakpoint on https://ewwink.github.io/demo/script.js at line 10
click debugger continue button, you will see message variable "hijacked..."
the code:
// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// mod by ewwink
var attachedTabs = {};
var version = "1.1";
chrome.debugger.onEvent.addListener(onEvent);
chrome.debugger.onDetach.addListener(onDetach);
chrome.browserAction.onClicked.addListener(function(tab) {
var tabId = tab.id;
var debuggeeId = {
tabId: tabId
};
if (attachedTabs[tabId] == "pausing")
return;
if (!attachedTabs[tabId])
chrome.debugger.attach(debuggeeId, version, onAttach.bind(null, debuggeeId));
else if (attachedTabs[tabId])
chrome.debugger.detach(debuggeeId, onDetach.bind(null, debuggeeId));
});
function onAttach(debuggeeId) {
if (chrome.runtime.lastError) {
alert(chrome.runtime.lastError.message);
return;
}
var tabId = debuggeeId.tabId;
chrome.browserAction.setIcon({
tabId: tabId,
path: "debuggerPausing.png"
});
chrome.browserAction.setTitle({
tabId: tabId,
title: "Pausing JavaScript"
});
attachedTabs[tabId] = "pausing";
chrome.debugger.sendCommand(
debuggeeId, "Debugger.enable", {},
onDebuggerEnabled.bind(null, debuggeeId));
}
function onDebuggerEnabled(debuggeeId) {
chrome.debugger.sendCommand(debuggeeId, "Debugger.setBreakpointByUrl", {
lineNumber: 10,
url: 'https://ewwink.github.io/demo/script.js'
});
}
function onEvent(debuggeeId, method, params) {
var tabId = debuggeeId.tabId;
if (method == "Debugger.paused") {
attachedTabs[tabId] = "paused";
var frameId = params.callFrames[0].callFrameId;
chrome.browserAction.setIcon({
tabId: tabId,
path: "debuggerContinue.png"
});
chrome.browserAction.setTitle({
tabId: tabId,
title: "Resume JavaScript"
});
chrome.debugger.sendCommand(debuggeeId, "Debugger.setVariableValue", {
scopeNumber: 0,
variableName: "changeMe",
newValue: {
value: 'hijacked by Extension'
},
callFrameId: frameId
});
}
}
function onDetach(debuggeeId) {
var tabId = debuggeeId.tabId;
delete attachedTabs[tabId];
chrome.browserAction.setIcon({
tabId: tabId,
path: "debuggerPause.png"
});
chrome.browserAction.setTitle({
tabId: tabId,
title: "Pause JavaScript"
});
}
demo

EDIT: Just saw your comment about this being for a custom extension you're writing. My answer won't help you (sorry!), but it might help people that come here looking for a way of setting normal breakpoints in Chrome.
Maybe you already did, but... Have you tried just clicking the line number of the line you want to set the breakpoint in?
Like this:
You can even enable or disable breakpoints in several different calls in the same line.
When the page is loaded, open Dev Tools with F12, then navigate to the JS file in the Sources panel, and add the breakpoints you want. Then, refresh the page to load it again -- Chrome will remember where you set the breakpoints and stop at them.

If you can modify the source code of the file that you want to debug, I would look use the debugger statement.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
function potentiallyBuggyCode() {
debugger; //application will break here as long as chrome developer tools are open
}

function breakhere() {
debugger;
}

ok, for start you have to sendCommand Debugger.enable .. something like this:
var tabId = parseInt(window.location.search.substring(1));
window.addEventListener("load", function() {
chrome.debugger.sendCommand({tabId:tabId}, "Debugger.enable");
chrome.debugger.attach( tabId, "0.1" );
chrome.debugger.onEvent.addListener(onEvent);
});
then inside you onEvent you can set breaking points
function onEvent(debuggeeId, message, params) {
if (tabId != debuggeeId.tabId) return;
var res = Debugger.setBreakpointByUrl( 2, 'url-of-the-script-file' );
}
I would strongly suggest to check the sniffing section on this page: https://chromedevtools.github.io/devtools-protocol/ because I was able to see the json that get returned via WS protocol and that will help you to do pretty much anything you want.. I can't build you full extension, you are on your own man,,
I guess that you need to add somekind of DOM elemnet with list of scripts that you'll parse from Network.getResponseBody and then somekind of UX tool to pick that scripts and let users to debugging,, that process could take you some time :(
hope I have steered you in the right direction, good luck!

CrossRider API, get opened tabs title

I am using the CrossRider api to get the opened tabs, using there API I can get the title of the links in my bookmarks, however with there api I cannot use how to get the title of the urls in my opened tabs, I can just get the URL.
Does anyone know if this is achievable, if not then if there is some other way. Current I have to call a php script to make calls to the URLs and extract the title, this is getting too slow with a lot of tabs open

It would be great if you included a code snippet to show how your code works. However, in the absence of a snippet, I'm guessing that you are working in the background scope using an API method such as appAPI.tabs.getAllTabs. As you correctly surmised, the method does no not provide the title of the URL.
There are several way to work around this, on of which you mentioned, however, I prefer getting the information from the tab itself through messaging. For example, assuming you still need the information in the background scope:
background.js:
appAPI.ready(function($) {
appAPI.message.listener(function(msg) {
if (msg.action==='tab-info') {
doSomething(msg.data);
}
});
appAPI.message.toAllTabs({action:'get-tab-info'});
});
extension.js:
appAPI.ready(function($) {
appAPI.message.listener(function(msg) {
if (msg.action==='get-tab-info') {
appAPI.message.toBackground({
action:'tab-info',
data: {
tabId: appAPI.getTabId(),
url: appAPI.dom.location.href,
title: document.title
}
});
}
});
});
[Disclosure: I am a Crossrider employee]

Possible to run userscript in IE11

I have a custom userscript that I'm running in Chrome and Firefox using Tampermonkey/Greasemonkey.
Is there any way of using this script in IE11? Or is there any plugins for IE11 that does what Tampermonkey/Greasemonkey does?

TrixIE WPF4.5 claims to emulate Greasemonkey on IE11.
Unfortunately, the original Trixie and IE7Pro stopped working around IE8-ish.

I use localStorage to make it work, which is supported by IE8 or later.
Steps:
Run the following code in IE's developer tool when the current window is in the domain where you want the script to run in:
var scriptName = 'Hello world';
function scriptBody(){
//---userscript starts--->
document.body.innerHTML = '<h1>Hello world!</h1>';
//---userscript ends--->
}
var script = scriptBody.toString()
.split('//---userscript starts--->')[1]
.split('//---userscript ends--->')[0];
localStorage.setItem(scriptName, script);
Create a bookmark and modify the URL into:
javascript:(function(){eval(localStorage.getItem('Hello world'));})()
Advantages:
No additional plugin needed.
Almost no script text length limit.
Disadvantages:
Need a user to click on a bookmark to run the script.
Need a reinstall if a user clears the browser cache.

A simple Google Search (I searched "greasemonkey for IE") yields various alternatives available for other browsers:
http://en.wikipedia.org/wiki/Greasemonkey#Equivalents_for_other_browsers
For Internet Explorer, similar functionality is offered by IE7Pro,[19] Sleipnir,[20] and iMacros.

Fiddler supports modifying the response of http requests.
We can use this feature to load userscript in any browser, include IE8.
This is an example:
static function OnBeforeResponse(oSession: Session) {
if (m_Hide304s && oSession.responseCode == 304) {
oSession["ui-hide"] = "true";
}
// match url
if (oSession.fullUrl == "http://apply.ccopyright.com.cn/goadatadic/getR11List.do") {
oSession.utilDecodeResponse();
var script = System.IO.File.ReadAllText("C:\\GitHub\\#selpic\\P660_printer\\Printer\\scripts\\form-save-load.js")
oSession.utilReplaceOnceInResponse("</body>", "<script>"+script+"</script></body>", true);
}
}
doc: Modifying a Request or Response

Just open Developer tools (press F12) and paste your script to Console, and then run it (Ctrl + Enter).