chrome.tabs.Tab is undefined from popup.js script

I was going through the Chrome extension “Getting started guide”:

and one section mentions this code

     {code: ' = "' + color + '";'});

I am getting an undefined error on tabs[0].id. Now the API documentation states that chrome.tabs.Tab is accessible but I can’t seem to get it. What am I doing wrong?

How to make chrome.downloads.onDeterminingFilename change the filenames only for downloads from one specific site?

I’m writing an extension to download images from a site, rename it and save it in a new Folder under Downloads. I’ve been successful with this but other files that I download from other sites also get renamed to “undefined.ext”.

I wanted to do an if else with downloadItem.referrer but the site that I’m downloading from returns an empty string.

This is what my background.js file looks like.


    const downloadImg = (url, sequence) => {{url: url}, function(downloadId) {
        nameMap[downloadId] = sequence;

    const downloadAllImages = (urls) => {
      for (key in urls) {
        downloadImg(urls[key], key);

    chrome.downloads.onDeterminingFilename.addListener(function(downloadItem, suggest) {
      id =;

referrer is empty string so I can’t do an if else here.

      console.log('downloadItem.referrer', downloadItem.url, id, downloadItem.state, downloadItem.referrer, downloadItem);
      let newName = `./${someNewFolder}/` + nameMap[id] + downloadItem.filename.slice(downloadItem.filename.lastIndexOf('.'));
      suggest({filename: newName, conflictAction: "overwrite" });

    const handleOnClick = () => {
        url: "*://**/*",
        active: true, 
        currentWindow: true
      }, (tabs) => {
        if (tabs.length > 0) {

    chrome.browserAction.onClicked.addListener(function(tab) {


      "background": {
        "scripts": [ "js/jquery-3.3.1.slim.min.js", "js/background.js" ]
      "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Some Title",
      "content_scripts": [
          "matches": ["*/*"],
          "js": ["js/jquery-3.3.1.slim.min.js", "js/content.js"],
          "run_at": "document_end"
      "description": "Some description",
      "manifest_version": 2,
      "name": "someName",
      "permissions": ["activeTab", "downloads", "tabs", "*://**/*" ],
      "version": "0.0"

How to access SDK.NetworkDispatcher in chrome extension

I’ve tried access chrome sdk using devtools, but it wasn’t available in default console. So in current console I’ve pressed ctrl+shift+J and a new devtools openned and then there I could use the SDK.NetworkDispatcher in console.

My problem is I couldn’t create any code to devtools using this because SDK is not available in chrome extension. I’ve tried use background script, devtools script, panel script and nothing works.

This code bellow is what I was using. It works just in inspector of inspector.
It basically save each websocket frame in a json file. ( if you will try this, first check is your chrome is saving files automatically or asking for directory, if it is asking for directory, please change to automatic because it will save to much json files)

Anyway if someone can create an extension executing this code please let me know how.

(function(console){ = function(data, filename){
    if(!data) {
      console.error(' No data')

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
      data = JSON.stringify(data, undefined, 4)

    var blob = new Blob([data], {type: 'text/json'}),
    e = document.createEvent('MouseEvents'),
    a = document.createElement('a') = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl = ['text/json',, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

// Frame/Socket message counter + filename
var iter = 0;

// This replaces the browser's `webSocketFrameReceived` code with the original code 
// and adds two lines, one to save the socket message and one to increment the counter.
SDK.NetworkDispatcher.prototype.webSocketFrameReceived = function (requestId, time, response) {
  var networkRequest = this._inflightRequestsById[requestId];
  if (!networkRequest) return;, iter + ".json")
  networkRequest.addFrame(response, time, false);
  networkRequest.responseReceivedTime = time;

Vue – Mixed content warning in Chrome Developer Console

I have a Vue.js app up and running, which produces the following warning.

Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.

The request is visible in the network tab. That’s not all however.

  • It only occurs once after a refresh. (F5)
  • It occurs exactly when Chrome dev tools are opened. (F12)
  • If dev tools were already open when the page was loaded, no HTTP request occurs.
  • With all plugins disabled, in incognito, the request is still sent.
  • The message is not shown in Firefox, or for any other web page in Chrome.
  • There are no absolute references to a HTTP address in the Vue app.
  • When I put scripts on PAUSE and re-open the console after a refresh, the request occurs but I do not enter a debugging state.
  • When I add a breakpoint to stop on any request containing “http://”, the breakpoint is never activated.

What could the problem be? How can I diagnose this spooky behavior?