3.0.0 - manifest v3 support

Glench · Sep 1, 2021 · 10fb572 · 10fb572
1 parent 3113b3e
commit 10fb572
Show file tree

Hide file tree

Showing 20 changed files with 1,789 additions and 122 deletions.
diff --git a/ExtPay.dev.js b/ExtPay.dev.js
@@ -258,19 +258,7 @@ You can copy and paste this to your manifest.json file to fix this error:
         polling = false;
     }
 
-    browser.runtime.onMessage.addListener(function(message, sender, send_response) {
-        if (message == 'fetch-user') {
-            // Only called via extensionpay.com/extension/[extension-id]/paid -> content_script when user successfully pays.
-            // It's possible attackers could trigger this but that is basically harmless. It would just query the user.
-            poll_user_paid()
-        } else if (message == 'trial-start') {
-            // no need to poll since the trial confirmation page has already set trialStartedAt
-            fetch_user() 
-        } else if (message == 'extpay-extinfo' && browser.management) {
-            // get this message from content scripts which can't access browser.management
-            return browser.management.getSelf()
-        }
-    });
+
 
     return {
         getUser: function() {
@@ -319,13 +307,22 @@ You can copy and paste this to your manifest.json file to fix this error:
                 trial_callbacks.push(callback)
             }
         },
-        // paymentPageLink: function() {
-        //     return new Promise((resolve, reject) => {
-        //         browser.storage.sync.get(['extensionpay_api_key'], function(storage) {
-        //             resolve(`${EXTENSION_URL}?api_key=${storage.extensionpay_api_key}`)
-        //         })
-        //     })
-        // }
+        startBackground: function() {
+            browser.runtime.onMessage.addListener(function(message, sender, send_response) {
+                console.log('service worker got message! Here it is:', message)
+                if (message == 'fetch-user') {
+                    // Only called via extensionpay.com/extension/[extension-id]/paid -> content_script when user successfully pays.
+                    // It's possible attackers could trigger this but that is basically harmless. It would just query the user.
+                    poll_user_paid()
+                } else if (message == 'trial-start') {
+                    // no need to poll since the trial confirmation page has already set trialStartedAt
+                    fetch_user() 
+                } else if (message == 'extpay-extinfo' && browser.management) {
+                    // get this message from content scripts which can't access browser.management
+                    return browser.management.getSelf()
+                }
+            });
+        }
     }
 }
 
diff --git a/README.md b/README.md
@@ -25,12 +25,12 @@ npm install extpay --save
 
 
 ## 2. Configure your `manifest.json`
-ExtPay needs the following configuration in your V2 `manifest.json`:
+ExtPay needs the following configuration in your `manifest.json` (for both manifest v2 and v3):
+
 ```json
 {
-    "manifest_version": 2,
     "permissions": [
-        "storage"
+      "storage"
     ]
 }
 ```
@@ -39,30 +39,61 @@ ExtPay will not show a scary permission warning when users try to install your e
 
 If you have a `"content_security_policy"` in your manifest or get a `Refused to connect to 'https://extensionpay.com...'` error, you'll have to add `connect-src https://extensionpay.com` to your extension's content security policy. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy">See Mozilla's documentation for more details</a>.
 
-Manifest V3 support coming soon.
-
 
 ## 3. Add `ExtPay` to `background.js` (required!)
 
-You need to put `ExtPay` in your background file, often named something like `background.js`. If you don't include `ExtPay` in your background file it won't work correctly.
+You need to put `ExtPay` in your background file, often named something like `background.js`. If you don't include `ExtPay` in your background file it won't work correctly. If you're using a bundler you can `import 'ExtPay'` or `require('ExtPay')` right in your `background.js`.
+
+With either Manifest V3 or Manifest V2 you'll need to **[sign up and register an extension](https://extensionpay.com)**. When you register an extension you'll create an extension id that you'll use when initializing `ExtPay`. We'll use `sample-extension` as the extension id in the following examples.
+
+### Manifest V3
+
+```json
+{
+    "background": {
+        "service_worker": ["background.js"]
+    }
+}
+```
 
-If you're not using a bundler, add `ExtPay.js` to `manifest.json`:
 ```js
+// background.js
+
+importScripts('ExtPay.js') // or `import` / `require` if using a bundler
+
+var extpay = ExtPay('sample-extension'); // Careful! See note below
+extpay.startBackground(); 
+```
+
+**Note about service workers**: In the example above `extpay` will become undefined when accessed in service worker callbacks. To use `extpay` in service worker callbacks, redeclare it like so:
+
+```js
+chrome.storage.local.get('foo', function() {
+    var extpay = ExtPay('sample-extension');
+    // ...
+})
+```
+Make sure not to use `extpay.startBackground()` in callbacks — it should only be called once.
+
+### Manifest V2
+
+If you're not using a bundler, add `ExtPay.js` to `manifest.json`:
+```json
 {
     "background": {
         "scripts": ["ExtPay.js", "background.js"]
     }
 }
 ```
 
-Then initialize ExtPay with your extension's unique `extension-id`, which you get by **[signing up and registering an extension](https://extensionpay.com)**. In the example below, the `extension-id` is `sample-extension`.
 
 ```js
 // background.js
 const extpay = ExtPay('sample-extension')
+extpay.startBackground();
 ```
 
-If you're using a bundler you can `import 'ExtPay'` or `require('ExtPay')` right in your `background.js`.
+
 
 
 ## 4. Use `extpay.getUser()` to check a user's paid status
@@ -134,7 +165,6 @@ To use this feature, you will need to include the following content script confi
 
 ```json
 {
-    "manifest_version": 2,
     "content_scripts": [
         {
             "matches": ["https://extensionpay.com/*"],
@@ -194,7 +224,6 @@ You can also use `extpay.onTrialStarted.addListener()` to run functions when the
 
 ```json
 {
-    "manifest_version": 2,
     "content_scripts": [
         {
             "matches": ["https://extensionpay.com/*"],
@@ -204,3 +233,11 @@ You can also use `extpay.onTrialStarted.addListener()` to run functions when the
     ]
 }
 ```
+
+
+## Contributing
+
+1. `npm install`
+2. Edit `ExtPay.dev.js`
+3. `npm run dev`
+4. `npm run dist` before committing changes.
diff --git a/dist/ExtPay.common.js b/dist/ExtPay.common.js
@@ -258,19 +258,7 @@ You can copy and paste this to your manifest.json file to fix this error:
         polling = false;
     }
 
-    browser.runtime.onMessage.addListener(function(message, sender, send_response) {
-        if (message == 'fetch-user') {
-            // Only called via extensionpay.com/extension/[extension-id]/paid -> content_script when user successfully pays.
-            // It's possible attackers could trigger this but that is basically harmless. It would just query the user.
-            poll_user_paid();
-        } else if (message == 'trial-start') {
-            // no need to poll since the trial confirmation page has already set trialStartedAt
-            fetch_user(); 
-        } else if (message == 'extpay-extinfo' && browser.management) {
-            // get this message from content scripts which can't access browser.management
-            return browser.management.getSelf()
-        }
-    });
+
 
     return {
         getUser: function() {
@@ -319,13 +307,22 @@ You can copy and paste this to your manifest.json file to fix this error:
                 trial_callbacks.push(callback);
             }
         },
-        // paymentPageLink: function() {
-        //     return new Promise((resolve, reject) => {
-        //         browser.storage.sync.get(['extensionpay_api_key'], function(storage) {
-        //             resolve(`${EXTENSION_URL}?api_key=${storage.extensionpay_api_key}`)
-        //         })
-        //     })
-        // }
+        startBackground: function() {
+            browser.runtime.onMessage.addListener(function(message, sender, send_response) {
+                console.log('service worker got message! Here it is:', message);
+                if (message == 'fetch-user') {
+                    // Only called via extensionpay.com/extension/[extension-id]/paid -> content_script when user successfully pays.
+                    // It's possible attackers could trigger this but that is basically harmless. It would just query the user.
+                    poll_user_paid();
+                } else if (message == 'trial-start') {
+                    // no need to poll since the trial confirmation page has already set trialStartedAt
+                    fetch_user(); 
+                } else if (message == 'extpay-extinfo' && browser.management) {
+                    // get this message from content scripts which can't access browser.management
+                    return browser.management.getSelf()
+                }
+            });
+        }
     }
 }
 

diff --git a/dist/ExtPay.js b/dist/ExtPay.js
@@ -1487,19 +1487,7 @@ You can copy and paste this to your manifest.json file to fix this error:
 	        polling = false;
 	    }
 
-	    browserPolyfill.runtime.onMessage.addListener(function(message, sender, send_response) {
-	        if (message == 'fetch-user') {
-	            // Only called via extensionpay.com/extension/[extension-id]/paid -> content_script when user successfully pays.
-	            // It's possible attackers could trigger this but that is basically harmless. It would just query the user.
-	            poll_user_paid();
-	        } else if (message == 'trial-start') {
-	            // no need to poll since the trial confirmation page has already set trialStartedAt
-	            fetch_user(); 
-	        } else if (message == 'extpay-extinfo' && browserPolyfill.management) {
-	            // get this message from content scripts which can't access browser.management
-	            return browserPolyfill.management.getSelf()
-	        }
-	    });
+
 
 	    return {
 	        getUser: function() {
@@ -1548,13 +1536,22 @@ You can copy and paste this to your manifest.json file to fix this error:
 	                trial_callbacks.push(callback);
 	            }
 	        },
-	        // paymentPageLink: function() {
-	        //     return new Promise((resolve, reject) => {
-	        //         browser.storage.sync.get(['extensionpay_api_key'], function(storage) {
-	        //             resolve(`${EXTENSION_URL}?api_key=${storage.extensionpay_api_key}`)
-	        //         })
-	        //     })
-	        // }
+	        startBackground: function() {
+	            browserPolyfill.runtime.onMessage.addListener(function(message, sender, send_response) {
+	                console.log('service worker got message! Here it is:', message);
+	                if (message == 'fetch-user') {
+	                    // Only called via extensionpay.com/extension/[extension-id]/paid -> content_script when user successfully pays.
+	                    // It's possible attackers could trigger this but that is basically harmless. It would just query the user.
+	                    poll_user_paid();
+	                } else if (message == 'trial-start') {
+	                    // no need to poll since the trial confirmation page has already set trialStartedAt
+	                    fetch_user(); 
+	                } else if (message == 'extpay-extinfo' && browserPolyfill.management) {
+	                    // get this message from content scripts which can't access browser.management
+	                    return browserPolyfill.management.getSelf()
+	                }
+	            });
+	        }
 	    }
 	}
 

diff --git a/dist/ExtPay.module.js b/dist/ExtPay.module.js
@@ -256,19 +256,7 @@ You can copy and paste this to your manifest.json file to fix this error:
         polling = false;
     }
 
-    runtime.onMessage.addListener(function(message, sender, send_response) {
-        if (message == 'fetch-user') {
-            // Only called via extensionpay.com/extension/[extension-id]/paid -> content_script when user successfully pays.
-            // It's possible attackers could trigger this but that is basically harmless. It would just query the user.
-            poll_user_paid();
-        } else if (message == 'trial-start') {
-            // no need to poll since the trial confirmation page has already set trialStartedAt
-            fetch_user(); 
-        } else if (message == 'extpay-extinfo' && management) {
-            // get this message from content scripts which can't access browser.management
-            return management.getSelf()
-        }
-    });
+
 
     return {
         getUser: function() {
@@ -317,13 +305,22 @@ You can copy and paste this to your manifest.json file to fix this error:
                 trial_callbacks.push(callback);
             }
         },
-        // paymentPageLink: function() {
-        //     return new Promise((resolve, reject) => {
-        //         browser.storage.sync.get(['extensionpay_api_key'], function(storage) {
-        //             resolve(`${EXTENSION_URL}?api_key=${storage.extensionpay_api_key}`)
-        //         })
-        //     })
-        // }
+        startBackground: function() {
+            runtime.onMessage.addListener(function(message, sender, send_response) {
+                console.log('service worker got message! Here it is:', message);
+                if (message == 'fetch-user') {
+                    // Only called via extensionpay.com/extension/[extension-id]/paid -> content_script when user successfully pays.
+                    // It's possible attackers could trigger this but that is basically harmless. It would just query the user.
+                    poll_user_paid();
+                } else if (message == 'trial-start') {
+                    // no need to poll since the trial confirmation page has already set trialStartedAt
+                    fetch_user(); 
+                } else if (message == 'extpay-extinfo' && management) {
+                    // get this message from content scripts which can't access browser.management
+                    return management.getSelf()
+                }
+            });
+        }
     }
 }
 

diff --git a/package.json b/package.json
@@ -1,15 +1,15 @@
 {
   "name": "extpay",
-  "version": "2.4.1",
+  "version": "3.0.0",
   "description": "The JavaScript library for https://extensionpay.com - payments for browser extensions, no server needed.",
   "main": "./dist/ExtPay.common.js",
   "module": "./dist/ExtPay.module.js",
   "browser": "./dist/ExtPay.js",
   "unpkg": "./dist/ExtPay.js",
   "jsdelivr": "./dist/ExtPay.js",
   "scripts": {
-    "replace_localhost": "sed -i '' \"s|http://localhost:3000|https://extensionpay\\.com|g\" sample-extension/manifest.json",
-    "replace_extpay": "sed -i '' \"s|https://extensionpay\\.com|http://localhost:3000|g\" sample-extension/manifest.json",
+    "replace_localhost": "sed -i '' \"s|http://localhost:3000|https://extensionpay\\.com|g\" sample-extension-mv2/manifest.json sample-extension-mv3/manifest.json",
+    "replace_extpay": "sed -i '' \"s|https://extensionpay\\.com|http://localhost:3000|g\" sample-extension-mv2/manifest.json sample-extension-mv3/manifest.json",
     "dev": "npm run replace_extpay && rollup -w -c rollup.config.dev.js || npm run replace_localhost",
     "dist": "rollup -c rollup.config.release.js && npm run replace_localhost"
   },

diff --git a/rollup.config.dev.js b/rollup.config.dev.js
@@ -4,12 +4,22 @@ const rollup_resolve = require('@rollup/plugin-node-resolve').nodeResolve
 export default {
     input: 'ExtPay.dev.js',
     output: [{
-        file: 'sample-extension/ExtPay.js',
+        file: 'sample-extension-mv2/ExtPay.js',
         format: 'iife',
         name: 'ExtPay'
     },
     {
-        file: 'test-extension/ExtPay.js',
+        file: 'sample-extension-mv3/ExtPay.js',
+        format: 'iife',
+        name: 'ExtPay'
+    },
+    {
+        file: 'dev-extension-mv3/ExtPay.js',
+        format: 'iife',
+        name: 'ExtPay'
+    },
+    {
+        file: 'dev-extension-mv2/ExtPay.js',
         format: 'iife',
         name: 'ExtPay'
     }],

diff --git a/rollup.config.release.js b/rollup.config.release.js
@@ -13,7 +13,12 @@ export default [
             name: 'ExtPay'
         },
         {
-            file: 'sample-extension/ExtPay.js',
+            file: 'sample-extension-mv2/ExtPay.js',
+            format: 'iife',
+            name: 'ExtPay'
+        },
+        {
+            file: 'sample-extension-mv3/ExtPay.js',
             format: 'iife',
             name: 'ExtPay'
         }],