Ported extension to the W3C Web Extensions API to support Firefox, Chrome, and more

.jshintrc

@@ -19,6 +19,7 @@
     "trailing": true,
     "smarttabs": true,
     "globals" : {
-        "chrome": true
+        "chrome": true,
+        "browser": true
     }
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "none"
+}

Gruntfile.js

@@ -143,7 +143,6 @@ module.exports = function (grunt) {
                 dest: '<%= config.dist %>'
             },
             html: [
-                '<%= config.app %>/popup.html',
                 '<%= config.app %>/options.html'
             ]
         },
@@ -240,7 +239,7 @@ module.exports = function (grunt) {
                         '{,*/}*.html',
                         'styles/{,*/}*.css',
                         'styles/fonts/{,*/}*.*',
-                        '_locales/{,*/}*.json',
+                        '_locales/{,*/}*.json'
                     ]
                 }]
             }

app/manifest.json

@@ -1,36 +1,37 @@
 {
     "name": "__MSG_appName__",
-    "version": "0.10.0",
+    "version": "1.0.2",
     "manifest_version": 2,
     "description": "__MSG_appDescription__",
     "icons": {
         "16": "images/icon-16.png",
         "128": "images/icon-128.png"
     },
+    "applications": {
+        "gecko": {
+            "id": "addon@fullyfeedly"
+        }
+    },
     "default_locale": "en",
     "background": {
-        "scripts": [
-            "scripts/chromereload.js",
-            "scripts/background.js"
-        ],
-        "persistent": false
+        "scripts": ["scripts/chromereload.js", "scripts/browser-polyfill.js", "scripts/background.js"]
     },
     "page_action": {
+        "browser_style": true,
         "default_icon": {
             "19": "images/icon-19.png",
             "38": "images/icon-38.png"
         },
-        "default_title": "fullyfeedly"
+        "default_title": "Fully Feedly"
     },
     "content_scripts": [
         {
-            "matches": [
-                "*://*.feedly.com/*"
-            ],
+            "matches": ["*://*.feedly.com/*"],
             "js": [
                 "bower_components/spin.js/spin.js",
                 "bower_components/iosoverlay/js/iosOverlay.js",
                 "bower_components/mousetrap/mousetrap.js",
+                "scripts/browser-polyfill.js",
                 "scripts/content.js"
             ],
             "css": [
@@ -45,11 +46,13 @@
         "options.html"
     ],
     "permissions": [
-        "declarativeContent",
-        "activeTab",
+        "tabs",
         "storage",
+        "*://*.feedly.com/*",
         "https://boilerpipe-web.appspot.com/*",
         "https://mercury.postlight.com/*"
     ],
-    "options_page": "options.html"
+    "options_ui": {
+        "page": "options.html"
+    }
 }

app/options.html

@@ -54,11 +54,16 @@ <h1 data-message="appName">FullyFeedly</h1>
             <div class="row">
                 <div class="col-md-8 col-md-offset-2">
                     <hr/>
-                    <p style="text-align: right"><span data-message="optionsDevelopedBy">Developed by</span>
+                    <p style="text-align: right"><span data-message="optionsDevelopedBy">Originally developed by</span>
                         <a href="http://linkedin.com/in/andreagrandi87">
                             <img src="images/linkedin_btn_20x15.png"/>Andrea Grandi
                         </a>
                     </p>
+                    <p style="text-align: right"><span data-message="optionsDevelopedBy">Ported to Web Extensions API by</span>
+                        <a href="http://linkedin.com/in/shanechurch">
+                            <img src="images/linkedin_btn_20x15.png"/>Shane Church
+                        </a>
+                    </p>
                 </div>
             </div>
         </div>
@@ -103,6 +108,8 @@ <h4 data-message="optionsMercuryStepTwo">2. Get your API key </h4>
         <!-- endbower -->
         <!-- endbuild -->
 
+        <script src="scripts/browser-polyfill.js"></script>
+
         <!-- build:js scripts/options.js -->
         <script src="scripts/options.js"></script>
         <!-- endbuild -->

app/scripts/background.js

@@ -1,44 +1,67 @@
 'use strict';
 
-chrome.runtime.onInstalled.addListener(function (details) {
-    console.log('FullyFeedly installed: previousVersion', details.previousVersion);
+browser.runtime.onInstalled.addListener(function(details) {
+    console.log(
+        'FullyFeedly installed: previousVersion',
+        details.previousVersion
+    );
 });
 
-
 function printResponse(response) {
     console.log('Content response:\n' + response);
 }
 
-/* Regex-pattern to check URLs against. 
+/* Regex-pattern to check URLs against.
    It matches URLs like: http[s]://[...]feedly.com[...] */
-var urlRegex = /^https?:\/\/(?:[^\.]+\.)?feedly\.com/;
+var urlRegex = /^https?:\/\/(?:[^.]+\.)?feedly\.com/;
+
+browser.tabs.onUpdated.addListener(function(tabId, changeInfo) {
+    if (!changeInfo.url) {
+        return;
+    }
+    if (urlRegex.test(changeInfo.url)) {
+        browser.pageAction.show(tabId);
+    } else {
+        browser.pageAction.hide(tabId);
+    }
+});
 
 // When the browser-action button is clicked...
-chrome.pageAction.onClicked.addListener(function(tab) {
+browser.pageAction.onClicked.addListener(function(tab) {
     // ...check the URL of the active tab against our pattern and...
     if (urlRegex.test(tab.url)) {
-        // ...if it matches, send a message specifying a callback too 
-        chrome.tabs.sendMessage(tab.id, { text: 'extract_article' }, printResponse);
+        // ...if it matches, send a message specifying a callback too
+        browser.tabs
+            .sendMessage(tab.id, { text: 'extract_article' })
+            .then(printResponse);
     }
 });
 
-// When the extension is installed or upgraded ...
-chrome.runtime.onInstalled.addListener(function() {
-    // Replace all rules ...
-    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
-        // With a new rule ...
-        chrome.declarativeContent.onPageChanged.addRules([
-            {
-                // That fires when a page's URL contains a 'feedly.com' ...
-                conditions: [
-                    new chrome.declarativeContent.PageStateMatcher({
-                        pageUrl: { urlContains: 'feedly.com' },
-                    })
-                ],
-                // And shows the extension's page action.
-                actions: [ new chrome.declarativeContent.ShowPageAction() ]
-            }
-        ]);
+browser.runtime.onMessage.addListener(function(message, sender) {
+    return new Promise(function(resolve, reject) {
+        if (message.hasOwnProperty('optionsUpdated')) {
+            browser.tabs
+                .query({
+                    url: '*://*.feedly.com/*'
+                })
+                .then(function(tabs) {
+                    for (var i = 0; i < tabs.length; i++) {
+                        var tab = tabs[i];
+                        browser.tabs
+                            .sendMessage(tab.id, {
+                                reloadOptions: true
+                            })
+                            .then(function() {});
+                    }
+                })
+                .catch(function(error) {
+                    console.log(
+                        '[FullyFeedly] Error reloading options on tabs: ',
+                        error
+                    );
+                });
+        }
+        resolve('done');
     });
 });