diff --git a/ExtPay.dev.js b/ExtPay.dev.js index c56043e..90cfeb2 100644 --- a/ExtPay.dev.js +++ b/ExtPay.dev.js @@ -54,33 +54,6 @@ You can copy and paste this to your manifest.json file to fix this error: ` } - const content_script_template = `"content_scripts": [ - { - "matches": ["${HOST}/*"], - "js": ["ExtPay.js"], - "run_at": "document_start" -}]` - const manifest = browser.runtime.getManifest(); - if (!manifest.content_scripts) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - const extpay_content_script_entry = manifest.content_scripts.find(obj => { - // removing port number because firefox ignores content scripts with port number - return obj.matches.includes(HOST.replace(':3000', '')+'/*') - }) - if (!extpay_content_script_entry) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } else { - if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { - throw `ExtPay setup error: Please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - } }) // ----- end configuration checks @@ -244,6 +217,34 @@ ${content_script_template}` }, onPaid: { addListener: function(callback) { + const content_script_template = `"content_scripts": [ + { + "matches": ["${HOST}/*"], + "js": ["ExtPay.js"], + "run_at": "document_start" + }]` + const manifest = browser.runtime.getManifest(); + if (!manifest.content_scripts) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + const extpay_content_script_entry = manifest.content_scripts.find(obj => { + // removing port number because firefox ignores content scripts with port number + return obj.matches.includes(HOST.replace(':3000', '')+'/*') + }) + if (!extpay_content_script_entry) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } else { + if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { + throw `ExtPay setup error: To use the onPaid callback handler, please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + } + paid_callbacks.push(callback) }, // removeListener: function(callback) { diff --git a/README.md b/README.md index cfc202a..5a7ca5d 100644 --- a/README.md +++ b/README.md @@ -28,13 +28,6 @@ ExtPay needs the following configuration in your V2 `manifest.json`: ```json { "manifest_version": 2, - "content_scripts": [ - { - "matches": ["https://extensionpay.com/*"], - "js": ["ExtPay.js"], - "run_at": "document_start" - } - ], "permissions": [ "storage" ] @@ -43,8 +36,6 @@ ExtPay needs the following configuration in your V2 `manifest.json`: ExtPay will not show a scary permission warning when users try to install your extension. -The content script is required to enable `extpay.onPaid` callbacks (see below). If you're using a bundler, you can create a file called something like `ExtPay_content_script.js` that only contains `import 'ExtPay'` or `require('ExtPay')` and use that in the `"js"` field above. - 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. See Mozilla's documentation for more details. Manifest V3 support coming soon. @@ -137,9 +128,26 @@ extpay.onPaid.addListener(user => { }) ``` +To use this feature, you will need to include the following content script configuration in your `manifest.json`: + +```json +{ + "manifest_version": 2, + "content_scripts": [ + { + "matches": ["https://extensionpay.com/*"], + "js": ["ExtPay.js"], + "run_at": "document_start" + } + ] +} +``` + +The content script is required to enable `extpay.onPaid` callbacks. It will add a permissions warning when installing your extension. If you're using a bundler, you can create a file called something like `ExtPay_content_script.js` that only contains `import 'ExtPay'` or `require('ExtPay')` and use that in the `"js"` field above. + You can add as many callback functions as you want. -Note: `onPaid` callbacks will be called after a user pays as well as after a user "logs in" (e.g. activates their paid account on a different browser/profile/install). This may change in the future. If you'd like this to work differently, please contact me with a detailed explanation of your use case :) +Note: `onPaid` callbacks will be called after a user pays as well as after a user "logs in" (e.g. activates their paid account on a different browser/profile/install). This may change in the future -- if you'd like this to work differently, please contact me with a detailed explanation of your use case :) ## 7. Use `extpay.openPaymentPage()` to let the user manage their subscription preferences diff --git a/dist/ExtPay.common.js b/dist/ExtPay.common.js index 5fc568b..1c2e126 100644 --- a/dist/ExtPay.common.js +++ b/dist/ExtPay.common.js @@ -54,33 +54,6 @@ You can copy and paste this to your manifest.json file to fix this error: ` } - const content_script_template = `"content_scripts": [ - { - "matches": ["${HOST}/*"], - "js": ["ExtPay.js"], - "run_at": "document_start" -}]`; - const manifest = browser.runtime.getManifest(); - if (!manifest.content_scripts) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - const extpay_content_script_entry = manifest.content_scripts.find(obj => { - // removing port number because firefox ignores content scripts with port number - return obj.matches.includes(HOST.replace(':3000', '')+'/*') - }); - if (!extpay_content_script_entry) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } else { - if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { - throw `ExtPay setup error: Please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - } }); // ----- end configuration checks @@ -244,6 +217,34 @@ ${content_script_template}` }, onPaid: { addListener: function(callback) { + const content_script_template = `"content_scripts": [ + { + "matches": ["${HOST}/*"], + "js": ["ExtPay.js"], + "run_at": "document_start" + }]`; + const manifest = browser.runtime.getManifest(); + if (!manifest.content_scripts) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + const extpay_content_script_entry = manifest.content_scripts.find(obj => { + // removing port number because firefox ignores content scripts with port number + return obj.matches.includes(HOST.replace(':3000', '')+'/*') + }); + if (!extpay_content_script_entry) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } else { + if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { + throw `ExtPay setup error: To use the onPaid callback handler, please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + } + paid_callbacks.push(callback); }, // removeListener: function(callback) { diff --git a/dist/ExtPay.js b/dist/ExtPay.js index 5b5dd23..c1aa147 100644 --- a/dist/ExtPay.js +++ b/dist/ExtPay.js @@ -1283,33 +1283,6 @@ You can copy and paste this to your manifest.json file to fix this error: ` } - const content_script_template = `"content_scripts": [ - { - "matches": ["${HOST}/*"], - "js": ["ExtPay.js"], - "run_at": "document_start" -}]`; - const manifest = browserPolyfill.runtime.getManifest(); - if (!manifest.content_scripts) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - const extpay_content_script_entry = manifest.content_scripts.find(obj => { - // removing port number because firefox ignores content scripts with port number - return obj.matches.includes(HOST.replace(':3000', '')+'/*') - }); - if (!extpay_content_script_entry) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } else { - if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { - throw `ExtPay setup error: Please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - } }); // ----- end configuration checks @@ -1473,6 +1446,34 @@ ${content_script_template}` }, onPaid: { addListener: function(callback) { + const content_script_template = `"content_scripts": [ + { + "matches": ["${HOST}/*"], + "js": ["ExtPay.js"], + "run_at": "document_start" + }]`; + const manifest = browserPolyfill.runtime.getManifest(); + if (!manifest.content_scripts) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + const extpay_content_script_entry = manifest.content_scripts.find(obj => { + // removing port number because firefox ignores content scripts with port number + return obj.matches.includes(HOST.replace(':3000', '')+'/*') + }); + if (!extpay_content_script_entry) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } else { + if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { + throw `ExtPay setup error: To use the onPaid callback handler, please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + } + paid_callbacks.push(callback); }, // removeListener: function(callback) { diff --git a/dist/ExtPay.module.js b/dist/ExtPay.module.js index 359c49c..a57d4e8 100644 --- a/dist/ExtPay.module.js +++ b/dist/ExtPay.module.js @@ -52,33 +52,6 @@ You can copy and paste this to your manifest.json file to fix this error: ` } - const content_script_template = `"content_scripts": [ - { - "matches": ["${HOST}/*"], - "js": ["ExtPay.js"], - "run_at": "document_start" -}]`; - const manifest = runtime.getManifest(); - if (!manifest.content_scripts) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - const extpay_content_script_entry = manifest.content_scripts.find(obj => { - // removing port number because firefox ignores content scripts with port number - return obj.matches.includes(HOST.replace(':3000', '')+'/*') - }); - if (!extpay_content_script_entry) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } else { - if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { - throw `ExtPay setup error: Please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - } }); // ----- end configuration checks @@ -242,6 +215,34 @@ ${content_script_template}` }, onPaid: { addListener: function(callback) { + const content_script_template = `"content_scripts": [ + { + "matches": ["${HOST}/*"], + "js": ["ExtPay.js"], + "run_at": "document_start" + }]`; + const manifest = runtime.getManifest(); + if (!manifest.content_scripts) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + const extpay_content_script_entry = manifest.content_scripts.find(obj => { + // removing port number because firefox ignores content scripts with port number + return obj.matches.includes(HOST.replace(':3000', '')+'/*') + }); + if (!extpay_content_script_entry) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } else { + if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { + throw `ExtPay setup error: To use the onPaid callback handler, please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + } + paid_callbacks.push(callback); }, // removeListener: function(callback) { diff --git a/package.json b/package.json index 1bb6c7f..2ad7ec9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "extpay", - "version": "2.2.0", + "version": "2.2.1", "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", diff --git a/sample-extension/ExtPay.js b/sample-extension/ExtPay.js index 5b5dd23..c1aa147 100644 --- a/sample-extension/ExtPay.js +++ b/sample-extension/ExtPay.js @@ -1283,33 +1283,6 @@ You can copy and paste this to your manifest.json file to fix this error: ` } - const content_script_template = `"content_scripts": [ - { - "matches": ["${HOST}/*"], - "js": ["ExtPay.js"], - "run_at": "document_start" -}]`; - const manifest = browserPolyfill.runtime.getManifest(); - if (!manifest.content_scripts) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - const extpay_content_script_entry = manifest.content_scripts.find(obj => { - // removing port number because firefox ignores content scripts with port number - return obj.matches.includes(HOST.replace(':3000', '')+'/*') - }); - if (!extpay_content_script_entry) { - throw `ExtPay setup error: Please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } else { - if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { - throw `ExtPay setup error: Please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson - -${content_script_template}` - } - } }); // ----- end configuration checks @@ -1473,6 +1446,34 @@ ${content_script_template}` }, onPaid: { addListener: function(callback) { + const content_script_template = `"content_scripts": [ + { + "matches": ["${HOST}/*"], + "js": ["ExtPay.js"], + "run_at": "document_start" + }]`; + const manifest = browserPolyfill.runtime.getManifest(); + if (!manifest.content_scripts) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + const extpay_content_script_entry = manifest.content_scripts.find(obj => { + // removing port number because firefox ignores content scripts with port number + return obj.matches.includes(HOST.replace(':3000', '')+'/*') + }); + if (!extpay_content_script_entry) { + throw `ExtPay setup error: To use the onPaid callback handler, please include ExtPay as a content script in your manifest.json matching "${HOST}/*". You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } else { + if (!extpay_content_script_entry.run_at || extpay_content_script_entry.run_at !== 'document_start') { + throw `ExtPay setup error: To use the onPaid callback handler, please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson + + ${content_script_template}` + } + } + paid_callbacks.push(callback); }, // removeListener: function(callback) {