CODEWITHSUNDEEP
javascriptfirefoxfirefox-addon-webextensions
David
David

Reputation: 83

How can I change the background image with WebExtensions?

I want to change the background image of the Firefox's new tab (about:newtab) with a WebExtension. I've tried this code but it doesn't work:

window.addEventListener("load",function(){
   if(window.document.URL == "about:newtab"){
       window.document.body.style.backgroundImage = "url(https://images-assets.nasa.gov/image/iss050e066094/iss050e066094~orig.jpg)"
   }
});

manifest.json:

{
  "description": "An example extension",
  "homepage_url": "",
  "manifest_version": 2,
  "name": "wallpaper",
  "permissions": [
    "alarms",
    "theme",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "version": "1.0",
  "gecko": {
      "strict_min_version": "55.0a2"
  }
}

Thanks in advance.

Upvotes: 0

Views: 374

Answers (1)

Smile4ever
Smile4ever

Reputation: 3704

Currently, you cannot alter about: pages due to security reasons.

If you really want another background image on about:newtab, you will need to override the new tab page with your own implementation using chrome_url_overrides. Newtab overriding is available since Firefox 54 (implemented in Bug 1234150).

You would do it like this:

"chrome_url_overrides" : {
  "newtab": "my-new-tab.html"
}

So your manifest would become something like this

{
  "description": "An example extension",
  "homepage_url": "",
  "manifest_version": 2,
  "name": "wallpaper",
  "permissions": [
    "alarms",
    "theme",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "version": "1.0",
  "gecko": {
      "strict_min_version": "55.0a2"
  },
  "chrome_url_overrides" : {
    "newtab": "my-new-tab.html"
  }
}

Implementing your own custom new tab page is a non trivial task:

  • You will need to implement top visited sites. You are able to do this using the topSites api.
  • Probably you want to implement search as well. Since you can't read the searchengines yet (Bug 1352598) you might want to implement search by hardcoding URLs in your addon, adding a dropdown to select your favorite search engine. Next, when the user entered a query and presses ENTER, you can replace the current "New tab" page with the search results page using the tabs.update method, replacing the url property with the url of the search page + query.

I've opened a bug report asking for an API to set the background image on about:newtab and about:home. See Bug 1391912.

Upvotes: 2

Related Questions