{"id":10977,"date":"2017-12-07T08:34:43","date_gmt":"2017-12-07T07:34:43","guid":{"rendered":"http:\/\/flaven.fr\/?p=10977"},"modified":"2017-12-07T08:34:43","modified_gmt":"2017-12-07T07:34:43","slug":"extension-chrome-firefox-making-a-quick-web-extension-for-chrome","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2017\/12\/extension-chrome-firefox-making-a-quick-web-extension-for-chrome\/","title":{"rendered":"Extension, Chrome, Firefox &#8211; Making a quick web extension for Chrome"},"content":{"rendered":"<p>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.<br \/>\nThat is the case for the add-ons JSONView for Firefox, made by\u00a0Ben 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 &#8220;new&#8221; Firefox Quantum (v57).<br \/>\nApparently, an update is forecast but many users including me are still waiting.<\/p>\n<p>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.<\/p>\n<p>Just find out, that it was not so complicated to ship a small web extension mostly based on simple technologies : HTML, CSS and JavaScript.<\/p>\n<p><b>You can find the source code on github<\/b><br \/>\n<a href=\"https:\/\/github.com\/bflaven\/BlogArticlesExamples\/tree\/master\/chrome-test-extension-4\" target=\"_blank\">https:\/\/github.com\/bflaven\/BlogArticlesExamples\/tree\/master\/chrome-test-extension-4<\/a><\/p>\n<p><b>Conclusion: Like always if you iterate quickly, you will get a quick shippable extension mostly for your personal use.<\/b><\/p>\n<p><b>The web extension that parse the 25 articles of the RSS<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2017\/12\/build_an_extension_for_firefox_1.jpg\" width=\"640\" height=\"480\" alt=\"Extension, Chrome, Firefox - Making a quick web extension for Chrome\"><\/p>\n<p><b>Installation and uninstallation at <code>chrome:\/\/extensions\/<\/code><\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2017\/12\/build_an_extension_for_firefox_2.jpg\" width=\"640\" height=\"480\" alt=\"Extension, Chrome, Firefox - Making a quick web extension for Chrome\"><\/p>\n<p><b>The manifest.json of the web extension<\/b><\/p>\n<pre lang=\"json\">\r\n\t\t{\r\n  \"manifest_version\": 2,\r\n  \"name\": \"F24 English News Reader\",\r\n  \"author\": \"Bruno Flaven <info@flaven.fr>\",\r\n  \"version\": \"1.0\",\r\n  \"homepage_url\": \"https:\/\/github.com\/bflaven\",\r\n  \"description\": \"Displays items from the France 24 in English from a RSS feed in a popup.\",\r\n  \"icons\": {\r\n    \"128\": \"icons\/icon_128x128.png\",\r\n    \"91\": \"icons\/icon_91x91.png\",\r\n    \"19\": \"icons\/icon_19x19.png\"\r\n  },\r\n  \"browser_action\": {\r\n    \"default_title\": \"F24 English News Reader\",\r\n    \"default_icon\": \"icons\/icon_19x19.png\",\r\n    \"default_popup\": \"feed.html\"\r\n  },\r\n  \"permissions\": [\r\n    \"tabs\",\r\n    \"http:\/\/www.france24.com\/en\/top-stories\/rss\"\r\n  ],\r\n  \"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:\"\r\n}\r\n\t<\/pre>\n<h2>Read more<\/h2>\n<ul>\n<h4>FOR FIREFOX<\/h4>\n<li>JSONView for Chrome<br \/><a href=\"https:\/\/github.com\/jamiew\/jsonview-chrome\" target=\"_blank\">https:\/\/github.com\/jamiew\/jsonview-chrome<\/a><\/li>\n<li>How To Develop A Firefox Extension<br \/><a href=\"https:\/\/robertnyman.com\/2009\/01\/24\/how-to-develop-a-firefox-extension\/\" target=\"_blank\">https:\/\/robertnyman.com\/2009\/01\/24\/how-to-develop-a-firefox-extension\/<\/a><\/li>\n<li>Create a Simple Web Extension<br \/><a href=\"https:\/\/davidwalsh.name\/web-extensions\" target=\"_blank\">https:\/\/davidwalsh.name\/web-extensions<\/a><\/li>\n<li>Add-ons Mozilla &#8211; Your first extension<br \/><a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/Your_first_WebExtension\" target=\"_blank\">https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/Your_first_WebExtension<\/a><\/li>\n<li>How to enable legacy extensions in Firefox 57<br \/><a href=\"https:\/\/www.ghacks.net\/2017\/08\/12\/how-to-enable-legacy-extensions-in-firefox-57\/\" target=\"_blank\">https:\/\/www.ghacks.net\/2017\/08\/12\/how-to-enable-legacy-extensions-in-firefox-57\/<\/a><\/li>\n<li>webextensions-examples<br \/><a href=\"https:\/\/github.com\/mdn\/webextensions-examples\" target=\"_blank\">https:\/\/github.com\/mdn\/webextensions-examples<\/a><\/li>\n<li>&#8220;borderify&#8221; WebExtension &#8211; part 1<br \/><a href=\"https:\/\/www.youtube.com\/watch?v=cer9EUKegG4\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=cer9EUKegG4<\/a><\/li>\n<li>Add-ons Mozilla &#8211; Browser Extensions<br \/><a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\" target=\"_blank\">https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions<\/a><\/li>\n<h4>FOR CHROME<\/h4>\n<li>How to Create a Chrome Extension in 10 Minutes Flat<br \/><a href=\"https:\/\/www.sitepoint.com\/create-chrome-extension-10-minutes-flat\/\n\" target=\"_blank\">https:\/\/www.sitepoint.com\/create-chrome-extension-10-minutes-flat\/<br \/>\n<\/a><\/li>\n<li>Interacting with Browser Content From Your Chrome Extension<br \/><a href=\"https:\/\/www.sitepoint.com\/premium\/screencasts\/interacting-with-browser-content-from-your-chrome-extension\" target=\"_blank\">https:\/\/www.sitepoint.com\/premium\/screencasts\/interacting-with-browser-content-from-your-chrome-extension<\/a><\/li>\n<li>chrome-extension-development by learnable-content &#8211; lesson 1.3<br \/><a href=\"https:\/\/github.com\/learnable-content\/chrome-extension-development\/tree\/lesson1.3\" target=\"_blank\">https:\/\/github.com\/learnable-content\/chrome-extension-development\/tree\/lesson1.3<\/a><\/li>\n<li>chrome-extension-development by learnable-content &#8211; lesson 1.4<br \/><a href=\"https:\/\/github.com\/learnable-content\/chrome-extension-development\/tree\/lesson1.4\" target=\"_blank\">https:\/\/github.com\/learnable-content\/chrome-extension-development\/tree\/lesson1.4<\/a><\/li>\n<li>How to Make a Chrome Extension<br \/><a href=\"https:\/\/robots.thoughtbot.com\/how-to-make-a-chrome-extension\" target=\"_blank\">https:\/\/robots.thoughtbot.com\/how-to-make-a-chrome-extension<\/a><\/li>\n<li>Sample Extensions @ developer.chrome<br \/><a href=\"https:\/\/developer.chrome.com\/extensions\/samples\" target=\"_blank\">https:\/\/developer.chrome.com\/extensions\/samples<\/a><\/li>\n<li>Tutorial: Debugging @ developer.chrome<br \/><a href=\"https:\/\/developer.chrome.com\/extensions\/tut_debugging\" target=\"_blank\">https:\/\/developer.chrome.com\/extensions\/tut_debugging<\/a><\/li>\n<li>Chrome DevTools<br \/><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\" target=\"_blank\">https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/<\/a><\/li>\n<h4>ICONS<\/h4>\n<li>11,587 icon packs from flaticon<br \/><a href=\"https:\/\/www.flaticon.com\/packs\/2\" target=\"_blank\">https:\/\/www.flaticon.com\/packs\/2<\/a><\/li>\n<li>Manifest &#8211; Icons<br \/><a href=\"https:\/\/developer.chrome.com\/apps\/manifest\/icons\" target=\"_blank\">https:\/\/developer.chrome.com\/apps\/manifest\/icons<\/a><\/li>\n<h4>EXAMPLES<\/h4>\n<li>Source of the JSON Viewer Extension<br \/><a href=\"https:\/\/github.com\/tulios\/json-viewer\" target=\"_blank\">https:\/\/github.com\/tulios\/json-viewer<\/a><\/li>\n<li>The RT News Extension<br \/><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/rt-news\/kloiceblkijlknknaibcaieiicafajlo?hl=fr\" target=\"_blank\">https:\/\/chrome.google.com\/webstore\/detail\/rt-news\/kloiceblkijlknknaibcaieiicafajlo?hl=fr<\/a><\/li>\n<li>Developing Google Chrome Extensions<br \/><a href=\"https:\/\/code.tutsplus.com\/tutorials\/developing-google-chrome-extensions--net-33076\" target=\"_blank\">https:\/\/code.tutsplus.com\/tutorials\/developing-google-chrome-extensions&#8211;net-33076<\/a><\/li>\n<li>All Chrome Extension examples collected into one repository<br \/><a href=\"https:\/\/github.com\/orbitbot\/chrome-extensions-examples\" target=\"_blank\">https:\/\/github.com\/orbitbot\/chrome-extensions-examples<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2017\/12\/extension-chrome-firefox-making-a-quick-web-extension-for-chrome\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Extension, Chrome, Firefox &#8211; Making a quick web extension for Chrome<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":10981,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Build a quick web extension for Chrome and Firefox to replace outdated add-ons like JSONView. Achieve seamless JSON file inspection and content viewing.","bf_ai_og_title":"Build Quick Web Extension","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3437,3454,3444,3447,3448,3449,3450,3435,3452],"tags":[2400,372,209,375,1568,303,226,192],"class_list":["post-10977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business-case-studies","category-journalism-writing","category-programming-databases","category-technology-trends","category-tools-productivity","category-tutorials-how-to","category-ux-product-design","category-web-development","category-wordpress-cms","tag-ben-hollis","tag-chrome","tag-css","tag-extension","tag-firefox","tag-html","tag-javascript","tag-json"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2R3","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2017\/12\/build_an_extension_for_firefox_b.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=10977"}],"version-history":[{"count":2,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10977\/revisions"}],"predecessor-version":[{"id":10982,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10977\/revisions\/10982"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/10981"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=10977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=10977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=10977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}