google-chrome-extension,google-chrome-devtools , How to access the DevTools API without actually opening the DevTools window?

How to access the DevTools API without actually opening the DevTools window?


Tag: google-chrome-extension,google-chrome-devtools

The documentation says "An instance of the extension's DevTools page is created each time a DevTools window opens. The DevTools page exists for the lifetime of the DevTools window."

However, the Facebook Pixel Helper manages to to get network information without the devtools window being open.

So, I was wondering if there was some other API or a workaround to access the content from the DevTools window (specifically the networks tab, which Facebook seems to be able to do).


The chrome.devtools API cannot be used without opening the devtools window. The Facebook Pixel Helper uses the chrome.webRequest API to get information about network requests. This API does not offer any access to the response body, so that's not particularly helpful.

There are some more (powerful) methods, which are not used by the FB Pixel Helper extension:


Using Youtube's Data API

I cannot figure out how to use Youtube's API V3, with Chrome's identity extension API. Is there a tutorial somewhere? I would like to start by rating a video.

Chrome Extension - How to execute a JS script on page load

The following is that I'm trying to achieve Every time '' loads, a script/function triggers. However, the functions itself reloads the page via 'location.reload();' Basically, an infinite loop of reloads. Script reloads page -> Script injected -> Script reloads page -> etc. I want the tab @ to keep...

Mismatched anonymous define() in Chrome extension content script

I'm trying to build a Chrome extension with TypeScript. The setup is quite simple: In manifest.json { "permissions": [ "webRequest", "webRequestBlocking", "tabs", "storage", "http://*/", "https://*/*" ], "content_scripts": [ { "matches": [ "http://*/*", "https://*/*" ], "js": [ "scripts/require.js", "scripts/require-cs.js", "scripts/main.js", "scripts/contentscript.js" ], "run_at": "document_end", "all_frames": true }], } In model.ts: export...

Simple Chrome Extension : Open an url in a new tab

I'm looking to create a "new tab" extension like Panda or the Product Hunt Extension: the user can open a new tab with my website inside, with an hidden url. I've generated my package with the awesome Extensionizr and here is my manifest.json : manifest.json { "name": "My app", "version":...

Can't find out how button click event got wired

I have a button which posts back through Ajax. I tried to find out what code executes when the button is clicked. I used Visual Event (screen capture below) to see how the event was bound but the info didn't help me enough. Then I set an event listener breakpoint...

detect requests calls in a url similar to network in chrome dev tools

I don't know if what I am looking for is possible, I want JS, or any other programming method solution to detect the requests calls for a given url page, something similar to chrome dev tools There is a site that displays videos, I would like to access through the...

Is HTML5 drag and drop compatible with Chrome Apps (packaged)?

I've tried the traditional methods and it works as a webpage in Chrome, but not when I'm using the page as a packaged app. I'm just doing this example from W3 for testing purposes since it's very simple.

Running Apps Script from Chrome extension requires authorization

I'm trying to execute a Google Apps Script from an event on my Chrome extension. While it works great, when ran for the first time by a new user, the apps script requires for the user to give it authorization before it can execute. The problem is when running the...

Can Chrome extension content script access all tabs?

Basically, I want to get all the opened tabs of the browser window, from within a tab, more specifically, in content script. I tried chrome.tabs.query, it works in background script, but doesn't work in content script. So my questions are: Is there a way to do such work? Maybe an...

What's the best way To edit CSS and JS of Html Template [closed]

I have a HTML5 Template in my Local Computer. I want to edit this template CSS and JS to use in my project. I use this solution to edit Template Open Web site With Google Chrome also Open with Notepad++ Edit CSS file with Notepad++ and Refresh page in Google...

Chrome extension console.log override

I'm building a chrome extension that reads the console log and find where an ip appears, after the string "Connecting to", and gets the ip. store = []; var oldf = console.log; console.log = function(){ store.push(arguments); oldf.apply(console, arguments); }; pos = 0 server = "" setTimeout(function(){ for(i = 0; i...

I can't write object literal notation in Dev Console? [duplicate]

This question already has an answer here: JavaScript object literals syntax error 2 answers I get error when i write this: {a:1, b:2} but not when i just write this {a:1} I've tried in Firefox and chrome both give errors. There is no error if i Assign it to...

can't submit form in chrome extension

I have been working in a new chrome extension, and i am Beginner I have a form with login details (username and password) and i want to check username and password with database and move to another page or form in this extension. popup file Local Storage Encoding Local Storage...

Adding eventListeners to checkboxes in for loop in chrome-extension

I have a function that gets all the tabs in a window and then updates the popup.html page by adding a checkbox for each tab. After doing this there is a second for loop that adds event listeners which update an dictionary containing the value of the checkbox's. The problem...

Can I fire up a Chrome extension API from code?

Is it possible to launch a Google Chrome extension within a website? E.g run some javascript that will launch the extensions UI? I'm building a web-app that will allow users to take screenshots of their desktop and edit them. I've got a sample extension up and running using dektopCapture but...

How to force loading images for the webpages installed “lazy load” without scrolling?

I implement a Chrome extension. The extension needs to get all images URLs of webpages. However, some webpages have "lazy load" plug-in. My question is if it is possible that I can still get URLs without required manually scrolling down?

How to respond to multiple bookmark operations in Chrome?

I'm working on a simple Chrome extension which deals with bookmarks. So far I've discovered two ways to respond to operations that the chrome.bookmarks API provides: pass callback function directly to the API call (eg. chrome.bookmarks.move(string id, object destination, function callback)) register callback function globally (chrome.bookmarks.onMoved.addListener(function callback)) As far as...

Run a function from injected js

I have been going around in circles with this, so I would appreciate some help This is what I want to achieve User presses my extension ison Popup appears with two buttons, 'run function a' and 'run function b' When they press a button it runs the function in my...

Constantly check the length of an element and perform an action if it is ever 1

I have an element on a page that I am constantly monitoring. If at any time that length is equal to 1, it means it exists on the page (the user has logged out) and I want to prompt them with a popup to login. So at the moment I...

Access DOM elements data document->Iframe ->Iframe->method chrome extension

I'm trying to access some data from an iframe nested within an iframe, from developers console: Object.keys(document.getElementById("contentBody"). contentDocument.getElementById('rawContent'). contentDocument.defaultView.window.messages) ["", "", "", "", "", ""] That's what I expect back, but I've tried to get that...

when chrome extension gets updated does the data stored in local storage gets deleted?

I have searched through google spec about chrome storage, but was not able to get a definite answer to my question. I am currently writing my first chrome extension, in which I store the data into a local storage. The thing that is bothering me is that when I release...

Chrome extension, custom context menu item not showing [duplicate]

This question already has an answer here: Chrome extension context menu not showing up 1 answer I know this question has been asked so many times on this site, e.g. this post. However, Chrome upgrades so fast and it seems those solutions don't work for the latest version anymore....

Visualise CSS selectors like :read-only in debug (F12 tools)

Having :read-only, [readonly] { background-color: aliceblue; } <form> <h2>test</h2> </form> How can I detect, when debugging, say, in Chrome, that the h2(or form) field has an :read-only property (or other type of selector, like :disabled, etc.) set to true? PS. To clarify the question: the question is not about a...

How to load saved .cpuprofile file in Chrome developer tools CPU profile?

There's a save button in the Chrome dev tools profiler, but no load button. How do you load a saved profile back into Chrome to view it?

Meta tags in chrome extension manifest.json?

I'll give a contrived example: Imagine that I wanted to list my Chrome extension on the Chrome Web Store under the title "Brad's Animal Names Extension" but I also wanted my extension to be revealed in the search results for "elephant". Is there any way I can do this without...

Is new line a separator in Javascript

While debugging a web SPA issue, I stumbled on something to which I could not find concrete references online: missing comma separator between function expressions in javascript. Here's the details: This works - explicit comma as a separator is there (note - intentionally on one line): var f1 = function()...

How to search for a DOM element in the Elements panel & highlight it in web page in Chrome dev tools?

I am using the latest Chrome & Canary. If I search for a DOM element in the search box in the drawer in dev tools and double click on a result, Chrome switches to the Sources panel and I can't highlight the element in the browser from there. How do...

Is there any way to detect javascript postmessages using chrome extension?

Does anybody sees a way to listen to cross iframe/window communication that is being done using the javascript postMessages ? Best would be using the chrome.debugger in the background page of an extension. I see that I can listen to HTTP-Traffic using the "Network.requestWillBeSent" and "Network.responseReceived" events. But I would...

My Chrome Extension Keeps Saying Its Corrupted

I recently got a Chrome Developer account, i paid the 5 bucks and stuff. I published my extension after extensive testing and it works perfectly, but after i uploaded the app and then downloaded it to test it, whenever i try to open it, it disappears from my chrome bar...

How does an unpublished extension get weekly users?

This is weird. I have an extension that is not available through the webstore because it's marked as private and is still pending review. However, I see the weekly users count increasing. When the counter was at 1, I thought it was somehow tracking my own usage of the locally...

Looking for tool that prevent script to become unresponsive [on hold]

For a side project I need to generate a lot of data from a WebGL Application. This Web App is mostly a personal tool and I really don't care if my browser become unresponsive (I mean, I know it will). Does someone know a browser/tool/plugin that could allow me to...

Host my own chrome extension in my website

I have developed one chrome extension and i want to use it on some windows pc's all over the world (of course the owners know me and my work) but i dont want to upload it on WEBSTORE since its only for something we use for ourselfs. Could i host...

How to get chrome extension ID in dev and production?

I work on a chrome extension. I do use some messages between my web page and background process. Problem is: the ID of my application is different when it comes from the google extension page and the one I locally work on and debugging. Is there a way to make...

IndexedDB: Can you manually initiate a version change transaction?

I am writing a chrome extension that utilizes IndexedDB to store some information client side in an IDBObjectStore within an IDBDatabase. The nature of the data is such that I need my users to be able to modify the object store at their whim. (add new objects modify existing ones...

Chrome - open dev tools in new window

in chrome 43.0.2357.81 I can't find the little box which can separate devtools into a new window I tried googling q=open+inspect+element+in+new+window+chrome nothing new Here is the Screen shot ! ...

Chrome Dev Tools console - select frame programatically

Using the Chrome Dev Tools console, I'm trying to select an element inside an iframe on the page. Is there a way to do this programatically without having to select the frame in the frames dropdown in order to set the console context to that frame first? Assuming the target...

Using openweathermap api for free

Can I use openweathermap api for free in a chrome extension? I am trying to build a chrome extension which will use openweather map api. Can I use it for free if I want to place it on webstore?

How to make function in loop run synchronously?

Am working on a chrome plugin, and need to sendMessage from an 'app page' to a 'content script' and then get the return messages, from inside a loop. But since the loop doesn't wait for the sendMessage to return a value before starting on the next iteration, it is screwing...

chrome extensions Uncaught ReferenceError: $ is not defined

I am trying to make a chrome extension that uses an external javascript file that uses JQuery. But I keep getting this silly error. Screenshot of error in chrome inspector. Any help is appreciated thanks! popup.js $(document).ready(function(){ $.ajax({url: "", success: function(result){ $("#report-details").html(result); }}); }); popup.html <!doctype html> <html> <head> <title>TEST</title>...

Get CSS class definition from chrome developer tools console

I would like to programatically retrieve a set of CSS class definitions from chrome developer tools. In effect similar to what is displayed in styles tab in the right hand side. The input needs to be a class name and the output should be all the styles defined in it....

Why doesn't Chrome's console display the function code anymore?

In the past, if I had a function test with the content function test () { return true; } and I typed test into console, then I'd get back: function () { return true; } Now however, it just returns function test() without the actual function code. How do I...

JQuery .find() failing on an .ajax() result

I'm working on a Chrome extension which, under certain conditions, performs a $.ajax() request and then uses information of specific elements in the returned HTML. For now, I'm simply trying to have it access the specific element and log it to the console to ensure it works correctly. To start,...

What’s the quickest, easiest way to execute a JavaScript file on a live web page?

I have this JavaScript file URL: (hosted on GitHub and passed through RawGit), and I would like to inject it into a live web page via the browser’s console. In order to achieve that, I can dynamically create a <script> element and append it to the DOM: (function ()...

Why does chrome.tabs.create create 2 tabs?

When the chrome.tabs.create function is triggered by a message received, it creates 2 tabs. In the following demo code, 1 cat tab is created, and 2 dog tabs are created. Is this by design or is it a bug? If it is a known bug, can you provide the bug...

Are there any Chrome-specific techniques to scope/isolate CSS?

I'm writing a Chrome extension that injects HTML into a displayed page. I want the injected HTML to have it's own style, protected from the CSS that may be present in the host page. I've tried using conventional CSS, and still suffer from style corruption from the host page. After...

Chrome Developer Tools shows favicon 404 error in Brackets LivePreview

I've just started doing Anthony Alicea's "Javascript: Understanding the Weird Parts" course, and he's using the live preview feature of Brackets to demo his code. The first module is a barebones HTML page with a script tag linking to an empty JS file. When I open this page in Brackets...

Why Chrome shows \ufeff symbol and gray lines in TypeScript?

When I open my TypeScript in Chrome debugger I see strange red dot at the first line. I believe it corresponds to unrendered symbol \ufeff (as popover says). There is no such symbol in the TS file when I open it in editor (e. g., Notepad++ with "show all...

What is the name of the language in which the main program of Chromium is written?

We would like to develop a new plugin for Chromium. To achieve this goal, we must learn at least one computer language. We do not know its / their name(s). Do you know the name of the computer language in which is written the program contains 1) the variable whose...