Extension, Chrome, Firefox – Making a quick web extension for Chrome

Like anyone, I usually extended functionalities of the browsers that I am using. Unfortunately, when you upgrade your browser, some of the web extension does not work any more.
That is the case for the add-ons JSONView for Firefox, made by Ben Hollis. This add-ons is perfect if you are working with JSON files or a JSON output from an API. It enables you to inspect the file structure and the content easily. Sadly, the add-ons no longer works with the “new” Firefox Quantum (v57).
Apparently, an update is forecast but many users including me are still waiting.

What I had in mind was to investigate how it was possible to build quickly a new extension ? It was hardly lost and far beyond my skills, especially if my purpose was to build a JSON viewer ! But as I did some explorations, it has generated easily some product ideas.

Just find out, that it was not so complicated to ship a small web extension mostly based on simple technologies : HTML, CSS and JavaScript.

You can find the source code on github
https://github.com/bflaven/BlogArticlesExamples/tree/master/chrome-test-extension-4

Conclusion: Like always if you iterate quickly, you will get a quick shippable extension mostly for your personal use.

The web extension that parse the 25 articles of the RSS

Installation and uninstallation at chrome://extensions/

The manifest.json of the web extension

		{
  "manifest_version": 2,
  "name": "F24 English News Reader",
  "author": "Bruno Flaven <info@flaven.fr>",
  "version": "1.0",
  "homepage_url": "https://github.com/bflaven",
  "description": "Displays items from the France 24 in English from a RSS feed in a popup.",
  "icons": {
    "128": "icons/icon_128x128.png",
    "91": "icons/icon_91x91.png",
    "19": "icons/icon_19x19.png"
  },
  "browser_action": {
    "default_title": "F24 English News Reader",
    "default_icon": "icons/icon_19x19.png",
    "default_popup": "feed.html"
  },
  "permissions": [
    "tabs",
    "http://www.france24.com/en/top-stories/rss"
  ],
  "content_security_policy": "img-src 'self' http://* https://*; script-src 'self'; connect-src http://www.france24.com/en/top-stories/rss;object-src 'self'; frame-src data:"
}

Extension, Chrome, Firefox – Making a quick web extension for Chrome

Read more

FOR FIREFOX

FOR CHROME

ICONS

EXAMPLES

Published by Bruno Flaven