CODEWITHSUNDEEP
javascriptfirefoxtabsfirefox-addon
user20417316
user20417316

Reputation: 199

How to detect the drag & drop action also in blank tabs (newtab)?

I've been trying for hours to run an extension (addon) on Mozilla Firefox Browser that listens for drag&drop even on empty tabs.

If you look at the following code you will notice console.log(message) in background.js which is put there only for debugging.

//manifest.json
{
  "manifest_version": 2,
  "name": "Hello",
  "version": "1.0",
  "description": "Hello",
  "permissions": [
    "tabs",
    "activeTab",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "48": "icon.png"
  }
}

// content.js
document.addEventListener('dragover', function(event) {
  event.preventDefault();
}, false);

document.addEventListener('drop', function(event) {
  event.preventDefault();
  const file = event.dataTransfer.files[0];
  //... Do Something
}, false);

// background.js
browser.runtime.onInstalled.addListener(() => {
  console.log('Extension installed.');
});

browser.runtime.onMessage.addListener((message, sender) => {
  if (message.type === "dragDrop") {
    console.log(message);
  }
});

browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (tab.url === "about:blank" && changeInfo.status === "complete") {
    browser.tabs.executeScript(tabId, {
      file: "content.js"
    }).catch((error) => {
      console.error("Error on about:blank:", error);
    });
  }
});

The message is logged if it is a tab with content (full) but not in about:blank tab.

So the question is: How can you run the script even in blank tabs?

EDIT (CORRECTION):

After the message in Nanigashi's post, the new tabs are actually about:newtab and not about:blank.

Upvotes: 3

Views: 48

Answers (1)

Nanigashi
Nanigashi

Reputation: 393

How can you run the script even in blank tabs?

Content scripts do not run in about: pages by default, even with <all_urls> specified. To make content scripts run in about:blank, you must specify it explicitly with match_about_blank.

manifest.json

  ...
  "content_scripts": [ {
    "js": [ "content.js" ],
    "matches": [ "<all_urls>" ],
    "match_about_blank": true
  } ],
  ...

content.js

  console.log( 'content running' );

Be aware that the content script cannot be made to run in any other about: page, including about:newtab, which is what new tabs are (not about:blank).

You cannot use tabs.executeScript() for about: pages.

Upvotes: 1

Related Questions