Why is chrome.tabs.query() only allowing me to update some tabs - javascript

I have been fiddling around with chrome extensions for a few days now to learn more about how they work. I am trying to make a simple extension that adds "/about" to the end of the url for every webpage. This bit of code works for several pages, such as chrome://extensions, chrome://settings, etc., but does not work for others, such as https://www.google.com, https://www.amazon.com, etc. Can anyone point to the problem with my code?
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.tabs.query({active: true, currentWindow: true, status: "complete"}, function(array_of_Tabs) {
var activeTab = array_of_Tabs[0];
var url = activeTab.url;
chrome.tabs.update({url: url + "/about"});
window.close();
});
});
I apologize for any bad code, I am just getting started learning javascript. Thanks!

Related

Google Chrome Extension:Call Python function from javascript

I am developing chrome extension and from my javascript file, I am getting the url of the active tab. Now I want to pass this url to my python function in python code. How can I achieve this. I have tried few solutions posted here, but its no help. I need to send the "myurl" in the below code to my python function and get back results too.
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
var myurl = tabs[0].url;
console.log(myurl);
});
Try this, might works
System.Diagnostics.Process.Start("python.exe", "file.py");

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!

Google chrome extension error when debugger open only

I am trying to send a ajax request to a server inside a google chrome extension. I am using angular with it too and the code is inside the controller. The request works fine generally, but when I have the the DevTools open it throws an error. This is the relevant part of the code:
$scope.sendLink = function (){
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
var date = new Date();
var xPost = new XMLHttpRequest();
xPost.open("POST", **URL HERE*",true);
xPost.setRequestHeader("Content-type", "application/json");
xPost.send(JSON.stringify({"name":$scope.name,"url":url,"date":date}));
});
}
When I hit inspect element on the extension, and then do the request, the tabs array come back as empty. It works fine if the devTools window is closed. I can't figure out why that is the case. Any explanation would be appreciated!
You could have changed the javascript engine behavior via chrome-dev-tools. This would get activated only when the dev-tools are open.
For instance, once I found that a mate of mine had turned-off javascript using the chrome-dev-tools. His app wasn't executing when the chrome-dev-tools were open...

Difficulties saving URL from Chrome tab (for Chrome extension)

I'm attempting to build a Chrome extension which will check (through a "link:URL" Google search) which sites link to the one that is currently open in the active tab. But my code fails to properly save the tab's URL into a variable. I have found similar questions (and their answers) here on stackoverflow and I understand it may have sth to do with the fact that js is asynchronous, but I wasn't able to make it work. Any hint(s) would be hugely appreciated. Thanks!
// this is the part that doesn't work
chrome.tabs.query({'active': true}, function (tabs) {
var query = tabs[0].url;
});
// this is the part that works just fine
chrome.browserAction.onClicked.addListener(function(activeTab)
{
var stemURL = "http://www.google.com/#q=link:";
chrome.tabs.create({ url: (stemURL + query) });
});
Here's how I set the permissions in the manifest, which should be right
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
This is because when you declare your "query" variable, it only has scope within your callback function in chrome.tabs.query. Now, you could declare your variable at the top of your script to give it scope within the entire script:
var query;
chrome.tabs.query({'active': true}, function (tabs) {
query = tabs[0].url;
});
chrome.browserAction.onClicked.addListener(function(activeTab)
{
var stemURL = "http://www.google.com/#q=link:";
chrome.tabs.create({ url: (stemURL + query) });
});
...or you could use your activeTab variable that chrome.browserAction.onClick passes to you and grab the active tab's URL from that to ensure that you open the search results for the tab that the user was viewing when they clicked your extension's button, which would also have the added advantage of cutting out the first half of your code:
chrome.browserAction.onClicked.addListener(function(activeTab)
{
var stemURL = "http://www.google.com/#q=link:";
chrome.tabs.create({ url: (stemURL + activeTab.url) });
});
I would recommend the latter approach; it's faster, cleaner, and more reliable. Good luck!

Categories

Resources