How to call function in certain time interval Ask Question

I need to run a certain API function, in a certain time period once the access token is granted, and check the status and inform the user if there any changes.

So far i did it by clicking a button on popup window of the firefox addon and calling the functions background js files, so i can receive the info from the API and notify the user. But i need to automate this process in background js files.

Are there any firefox inbuild JS API or any other way to achieve this auto API request calling from addon background files?

Firefox Webextension: capture all tabs Ask Question

I’m working on a webextension for firefox and need to capture all tabs. I use the following code but capture is undefined:

var tabResults = [];

for (let tab of tabs) {
    var tabImage;
    var capturing = browser.tabs.captureTab(tab.id);
    capturing.then(function(imageUri){
        return imageUri;
    }).then(imageUri => {
        tabImage = imageUri;
    });

    tabResults.push({
        title: tab.title,
        fav: tab.favIconUrl,
        pinned: tab.pinned,
        capture: imageUri
    });
}

Actually I confused how promises work, because captureTab return an promise and I don’t know how to get captured image from a promise inside a loop

How to get the title of the current tab in firefox web extension? Ask Question

I am trying to code a simple firefox extension that displays the title of the current tab the user is viewing when the extension’s button is pressed.

Here is my manifest.json file:

{

    "manifest_version": 2,
    "name": "Perspective",
    "version": "1.0",

    "description": "Displays current tab title when clicked",

    "permissions": [
        "tabs"
    ],

    "icons": {
        "48": "icons/border-48.png"
    },

    "browser_action": {
        "browser_style": true,
        "default_popup": "popup/choose_page.html",
        "default_icon": {
            "16": "icons/news-icon-16.png",
            "32": "icons/news-icon-32.png"
        }
    }
}

And, here is my choose_page.js file

//Fetch the title of the active tab
console.log("-----------Button Clicked------------");
var activeTab = browser.tabs.query({active: true, currentWindow: true});
console.log("---------Printing type of variable "activeTab"");
if (typeof activeTab == "undefined")
    console.log("The object is undefined")
else 
    console.log("The type of activeTab is:" + typeof activeTab)

console.log("The title of activeTab is:")
console.log(activeTab.title);

Whenever I click my extension’s button, I get the following output in the console:

———–Button Clicked————

———Printing type of variable “activeTab”

The type of activeTab is:object

The title of activeTab is:

undefined

Why is the title of “activeTab” undefined, and how do I actually get the title of the current tab the user is viewing?

Here is the link to all of the files in the extension: https://drive.google.com/file/d/1L7vho9iSL9nX2LKBmCveJvODmKQBlqX9/view?usp=sharing

Inaccessible array returned by Firefox WebExtensions browser.tabs.query(). Can someone explain why? Ask Question

Can someone explain to me what is going on here? I am playing around with the Firefox WebExtensions API, and I am running into some rather strange behavior. Here is some very simple to code to illustrate the issue.

I am querying for all pinned tabs in all windows and I am expecting that the global array var pinned = []; will be populated with the tab data/objects. However, things are a little screwy to say the least. The array seems to be populated but the individual elements are not accessible using standard array notation pinned[0] returns undefined. I am absolutely perplexed by this.

So what is going on here? Is this an issue about scope or permissions?

Now the code …

[manifest.json]

{
  "manifest_version": 2,
  "name": "test",
  "version": "1.0",
  "description": "test",
  "icons": {
    "48": "icons/page-48_white.png"
  },
  "permissions": [
    "tabs",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "devtools_page": "test.html",
  "browser_action": {
    "default_icon": { "48": "icons/page-48_white.png"},
    "default_title": "Test",
    "browser_style": true
  }
}

[background.js]

function createExtPage(){
  browser.tabs.create({ "url": "test.html" });
}
browser.browserAction.onClicked.addListener(createExtPage);

[test.js]

var pinned = [];

browser.tabs.query({pinned: true})
  .then(tabs => {
    for (let [key, value] of tabs.entries() ) {
      console.log("Object " + key, value);
      pinned.push(value);
    }
  });

console.debug("All Pinned Tabs", pinned);
console.debug("First Pinned Tab", pinned[0]);

Now take a look at this output from the Firefox developer tools console.

  All Pinned Tabs
  []
    0: {…}
        active: false
        audible: false
        discarded: false
        favIconUrl: "http://www.crunchyroll.com/favicon.ico?v=1"
        height: 800
        hidden: false
        highlighted: false
        id: 149
        incognito: false
        index: 0
        isArticle: false
        isInReaderMode: false
        lastAccessed: 1522229700160
        mutedInfo: Object { muted: false }
        pinned: true
        sharingState: Object { camera: false, microphone: false }
        status: "complete"
        title: "Crunchyroll - Watch Naruto Shippuden, Bleach, Anime Videos and Episodes Free Online"
        url: "http://www.crunchyroll.com/"
        width: 1440
        windowId: 3
        __proto__: Object { … }
  ​
    1: {…}
        active: false
        audible: false
        discarded: false
        favIconUrl: "https://www.pandora.com/favicon.ico"
        height: 800
        hidden: false
        highlighted: false
        id: 145
        incognito: false
        index: 0
        isArticle: false
        isInReaderMode: false
        lastAccessed: 1522447564848
        mutedInfo: Object { muted: false }
        pinned: true
        sharingState: Object { camera: false, microphone: false }
        status: "complete"
        title: "All Along The Watchtower Radio - Now Playing on Pandora"
        url: "https://www.pandora.com/station/play/3395036678172411653"
        width: 1440
        windowId: 67
        __proto__: Object { … }
  ​
    2: {…}
        active: false
        audible: false
        discarded: false
        height: 800
        hidden: false
        highlighted: false
        id: 171
        incognito: false
        index: 1
        isArticle: false
        isInReaderMode: false
        lastAccessed: 1522398347238
        mutedInfo: Object { muted: false }
        pinned: true
        sharingState: Object { camera: false, microphone: false }
        status: "complete"
        title: "Debugging with Firefox Developer Tools"
        url: "about:debugging"
        width: 1440
        windowId: 67
        __proto__: Object { … }
    length: 3
  ​  __proto__: Array []

  First Pinned Tab undefined

  Object 0
    {…}
      active: false
      audible: false
      discarded: false
      favIconUrl: "http://www.crunchyroll.com/favicon.ico?v=1"
      height: 800
      hidden: false
      highlighted: false
      id: 149
      incognito: false
      index: 0
      isArticle: false
      isInReaderMode: false
      lastAccessed: 1522229700160
      mutedInfo: Object { muted: false }
      pinned: true
      sharingState: Object { camera: false, microphone: false }
      status: "complete"
      title: "Crunchyroll - Watch Naruto Shippuden, Bleach, Anime Videos and Episodes Free Online"
      url: "http://www.crunchyroll.com/"
      width: 1440
      windowId: 3
      __proto__: Object { … }

  Object 1
    {…}
      active: false
      audible: false
      discarded: false
      favIconUrl: "https://www.pandora.com/favicon.ico"
      height: 800
      hidden: false
      highlighted: false
      id: 145
      incognito: false
      index: 0
      isArticle: false
      isInReaderMode: false
      lastAccessed: 1522447564848
      mutedInfo: Object { muted: false }
      pinned: true
      sharingState: Object { camera: false, microphone: false }
      status: "complete"
      title: "All Along The Watchtower Radio - Now Playing on Pandora"
      url: "https://www.pandora.com/station/play/3395036678172411653"
      width: 1440
      windowId: 67
      __proto__: Object { … }

  Object 2
    {…}
      active: false
      audible: false
      discarded: false
      height: 800
      hidden: false
      highlighted: false
      id: 171
      incognito: false
      index: 1
      isArticle: false
      isInReaderMode: false
      lastAccessed: 1522398347238
      mutedInfo: Object { muted: false }
      pinned: true
      sharingState: Object { camera: false, microphone: false }
      status: "complete"
      title: "Debugging with Firefox Developer Tools"
      url: "about:debugging"
      width: 1440
      windowId: 67
      __proto__: Object { … }

Here is the really screwy thing. If I type pinned[0] in the firefox developer tools console I get this result

pinned[0]
  {…}
    active: false
    audible: false
    discarded: false
    favIconUrl: "http://www.crunchyroll.com/favicon.ico?v=1"
    height: 800
    hidden: false
    highlighted: false
    id: 149
    incognito: false
    index: 0
    isArticle: false
    isInReaderMode: false
    lastAccessed: 1522229700160
    mutedInfo: Object { muted: false }
    pinned: true
    sharingState: Object { camera: false, microphone: false }
    status: "complete"
    title: "Crunchyroll - Watch Naruto Shippuden, Bleach, Anime Videos and Episodes Free Online"
    url: "http://www.crunchyroll.com/"
    width: 1440
    windowId: 3
    __proto__: Object { … }    

What gives? Why can I access the array’s elements from the console but not the code?

As you can see the array pinned is populated but I can’t access the individual elements inside using the array. Does anyone know why this is happening?

How to use fetch to get the HTML source of a webpage in a firefox or chrome web extension? Ask Question

I am trying to use fetch to get the HTML source of https://smmry.com/ in a Chrome/Firefox web extension.

Here is my manifest.json

{

    "manifest_version": 2,
    "name": "To_Be_Done",
    "version": "1.0",

    "description": "To_Be_Done",

    "permissions": [
        "tabs",
        "*://*.smmry.com/*"
    ],

    "icons": {
        "48": "icons/border-48.png"
    },

    "browser_action": {
        "browser_style": true,
        "default_popup": "popup/choose_page.html",
        "default_icon": {
            "16": "icons/news-icon-16.png",
            "32": "icons/news-icon-32.png"
        }
    }
}

Whenever, my extension’s button is clicked, I want to get the HTML source of smmry.com. However, I don’t know how to implement the fetch() method to do this. I’ve read through the documentation but I am still confused.

Can anyone show an example?

Firefox/Chrome web extension – how do I save outputs that are too big for the console? Ask Question

I tried to log the entire source of a webpage with console.log() in a chrome web extension. Unfortunately, the output was too big to save in the console. Even if it wasn’t too big, I’d like to save the output in a separate text file so I can view it in the future.

Here’s my current code:

fetch(newURL)
        .then((resp) => resp.text())
        .then(responseText => { console.log(responseText)}

The console crashes/says the output is too big when the program calls console.log(responseText)

How can I save “responseText” to a text file, for easier manipulation, and so the console doesn’t crash?

Javascript – How to silently retrieve the source of a webpage that won't respond to fetch() request Ask Question

I have a Firefox/Chrome web extension. When the user clicks the extension’s button, the extension should retrieve the text of a dynamically generated URL. Because I am writing a web extension, I have no control over this URL.

Here’s an example of what should (but doesn’t) happen:

1) User clicks my extension’s button

2) The extension generates the following URL – this URL will change each time the extension’s button is clicked:

Example URL:

https://smmry.com/sm_portal.php?&SM_TOKEN=2635119454&SM_POST_SAVE=0&SM_REDUCTION=-1&SM_CHARACTER=-1&SM_LENGTH=7&SM_URL=http://money.cnn.com/2018/04/03/investing/amazon-stock-widely-held/index.html

3) The extension retrieves the text of the file at that URL and does something with it.

Here’s a simplified version of my code:

<Insert_Code_That_Generates_URL and assigns it to generatedURL variable>
console.log("Fetching tokenSite");
fetch(generatedURL).then((response) => {
                console.log("Token site fetched");
                console.log(response);
            })

However, what actually happens is the following:

enter image description here

However, I can successfully manually open the URL or use browser.tabs.create({ url: generatedURL}); to open the URL in a new page.

I suspect the server is preventing the fetch() request from working because it is from an extension.

What are ways I can retrieve the text of the file located at that URL?

Someone has suggested loading the URL inside of an iFrame, but I don’t know how to do that (especially in the context of a web extension). So an example of that would be helpful.

Sidenote – once the console did not even log “Token site fetched”, rather there was just never a response from the XHR request.

Here is my manifest.json

{
"manifest_version": 2,
    "name": "Summarizer",
    "version": "1.0",

    "description": "Summarizes webpages",

    "permissions": [
        "tabs",
        "downloads",
        "*://*.smmry.com/*"
    ],

    "icons": {
        "48": "icons/border-48.png"
    },

    "browser_action": {
        "browser_style": true,
        "default_popup": "popup/choose_page.html",
        "default_icon": {
            "16": "icons/summarizer-icon-16.png",
            "32": "icons/summarizer-icon-32.png"
        }
    }
}

Manipulating the browser chrome in a web extension Ask Question

I want to develop a small extension to hide the browser chrome for a use case. It seems that the new way to develop addons is to use the web extension api. With the old api it seems to be possible to manipulate the chrome. E.g. in the webdeveloper console (with some config flags) I was able to run this code:

document.getElementById('toolbar-menubar').style.display = 'none';

However it seems to be impossible with the web extension api. Is there any way to do that?

Threaded Webextensions. WebWorker has no accsess to bookmarks (browser object) Ask Question

How can I access the bookmarks of the browser inside of a webworker, or how can I access the browser object.

If I call the following inside of the webworker-js file

console.log(self);
console.log(self.browser);
console.log(self.window);
console.log(this);
console.log(this.browser);
console.log(this.window);
console.log(window.browser);
console.log(browser);

most of them are undefined.

Why does my test if a firefox extension is installed does not work? Ask Question

I have developed extensions for my web-application for Chrome and Firefox. Now I would like to check, if a user has already installed the extension. If not, a message with a download link pops up.

In order do have a common code basis, I chose an option that should work with Chrome as well as with Firefox. Unfortunately it only does on Chrome.

My Code:

//page.js

window.addEventListener("message", function(event){
  if(event.data && event.data.direction == "from-content-script") {
    document-getElementById("message").style = "display: none";
  }
});

//content-script.js

window.postMessage({
  direction: "from-content-script",
  message: "Message from the content script"
}, "*");

//manifest.jsons

"content_scripts": [{
   "matches": ["http://localhost:3000/*],
    "js": ["content-script.js"]
}]

So on Chrome it works perfectly, but on Firefox it does not. I wonder if the content script is injected correctly, because if I include an alert for test purpose it does not show up.

I am referring to this: How to check if a Firefox WebExtension is installed or not with page JavaScript? but I cannot get it to work with firefox.

Thanks for your help!