Enforce usage of browser.* APIs (#798)

.gitignore

@@ -2,4 +2,3 @@ node_modules
 yarn.lock
 extension/**/*.js
 extension/**/*.map
-!extension/jquery-3.slim.min.js

extension/manifest.json

@@ -28,6 +28,7 @@
 	},
 	"background": {
 		"scripts": [
+			"browser-polyfill.min.js",
 			"background.js"
 		],
 		"persistent": false
@@ -43,7 +44,8 @@
 				"content.css"
 			],
 			"js": [
-				"jquery-3.slim.min.js",
+				"jquery.slim.min.js",
+				"browser-polyfill.min.js",
 				"content.js"
 			]
 		}

extension/options.html

@@ -27,4 +27,5 @@
 		<button type="submit">Authorize</button>
 	</p>
 </form>
+<script src="browser-polyfill.min.js"></script>
 <script src="options.js"></script>

package.json

@@ -18,6 +18,7 @@
 		"element-ready": "^2.2.0",
 		"github-injection": "^1.0.1",
 		"github-reserved-names": "^1.0.6",
+		"jquery": "^3.2.1",
 		"linkify-issues": "^1.3.0",
 		"linkify-urls": "^1.3.0",
 		"onetime": "^2.0.1",
@@ -37,6 +38,7 @@
 		"babel-plugin-transform-react-jsx": "^6.24.1",
 		"chrome-webstore-upload-cli": "^1.0.0",
 		"common-tags": "^1.4.0",
+		"copy-webpack-plugin": "^4.2.0",
 		"cross-env": "^5.0.5",
 		"dot-json": "^1.0.3",
 		"npm-run-all": "^4.1.1",
@@ -48,8 +50,7 @@
 	"xo": {
 		"envs": [
 			"browser",
-			"jquery",
-			"webextensions"
+			"jquery"
 		],
 		"rules": {
 			"import/no-unassigned-import": 0,
@@ -62,6 +63,9 @@
 		},
 		"ignores": [
 			"extension/**"
+		],
+		"globals": [
+			"browser"
 		]
 	},
 	"ava": {

src/background.js

@@ -1,4 +1,3 @@
-import browser from 'webextension-polyfill';
 import OptionsSync from 'webext-options-sync';
 import injectContentScripts from 'webext-dynamic-content-scripts';
 

src/features/add-releases-tab.js

@@ -13,17 +13,17 @@ function appendReleasesCount(count) {
 	select('.reponav-releases').append(<span class="Counter">{count}</span>);
 }
 
-function cacheReleasesCount() {
+async function cacheReleasesCount() {
 	const releasesCountCacheKey = `${repoUrl}-releases-count`;
 
 	if (pageDetect.isRepoRoot()) {
 		const releasesCount = select('.numbers-summary a[href$="/releases"] .num').textContent.trim();
 		appendReleasesCount(releasesCount);
-		chrome.storage.local.set({[releasesCountCacheKey]: releasesCount});
+		browser.storage.local.set({[releasesCountCacheKey]: releasesCount});
 	} else {
-		chrome.storage.local.get(releasesCountCacheKey, items => {
-			appendReleasesCount(items[releasesCountCacheKey]);
-		});
+		const items = await browser.storage.local.get(releasesCountCacheKey);
+
+		appendReleasesCount(items[releasesCountCacheKey]);
 	}
 }
 

src/features/mark-unread.js

@@ -1,4 +1,3 @@
-import browser from 'webextension-polyfill';
 import gitHubInjection from 'github-injection';
 import select from 'select-dom';
 import {h} from 'dom-chef';

src/features/open-all-notifications.js

@@ -1,4 +1,3 @@
-import browser from 'webextension-polyfill';
 import select from 'select-dom';
 import {h} from 'dom-chef';
 import {isNotifications} from '../libs/page-detect';

src/features/show-names.js

@@ -5,8 +5,11 @@ import {getUsername, groupBy} from '../libs/utils';
 
 const storageKey = 'cachedNames';
 
-const getCachedUsers = () => {
-	return new Promise(resolve => chrome.storage.local.get(storageKey, resolve));
+const getCachedUsers = async () => {
+	const keys = await browser.storage.local.get({
+		[storageKey]: {}
+	});
+	return keys[storageKey];
 };
 
 const fetchName = async username => {
@@ -28,7 +31,7 @@ const fetchName = async username => {
 
 export default async () => {
 	const myUsername = getUsername();
-	const cache = (await getCachedUsers())[storageKey] || {};
+	const cache = await getCachedUsers();
 
 	// {sindresorhus: [a.author, a.author], otheruser: [a.author]}
 	const selector = `.js-discussion .author:not(.refined-github-fullname)`;
@@ -61,5 +64,5 @@ export default async () => {
 	// Wait for all the fetches to be done
 	await Promise.all(fetches);
 
-	chrome.storage.local.set({[storageKey]: cache});
+	browser.storage.local.set({[storageKey]: cache});
 };

src/options.js

@@ -8,25 +8,19 @@ new OptionsSync().syncForm('#options-form');
 const cdForm = document.querySelector('#custom-domain');
 const cdInput = document.querySelector('#custom-domain-origin');
 
-if (!chrome.permissions) {
-	cdForm.disabled = true;
-	cdForm.querySelector('.js-permission-api').textContent = 'Your browser doesn’t support the required Permission API.';
-}
-
-cdForm.addEventListener('submit', event => {
+cdForm.addEventListener('submit', async event => {
 	event.preventDefault();
 
 	const origin = new URL(cdInput.value).origin;
 
 	if (origin) {
-		chrome.permissions.request({
+		const granted = await browser.permissions.request({
 			origins: [
 				`${origin}/*`
 			]
-		}, granted => {
-			if (granted) {
-				cdForm.reset();
-			}
 		});
+		if (granted) {
+			cdForm.reset();
+		}
 	}
 });

webpack.config.js

@@ -2,6 +2,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
 	entry: {
@@ -13,7 +14,12 @@ module.exports = {
 		new webpack.DefinePlugin({
 			process: '0'
 		}),
-		new webpack.optimize.ModuleConcatenationPlugin()
+		new webpack.optimize.ModuleConcatenationPlugin(),
+		new CopyWebpackPlugin([{
+			from: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.js'
+		}, {
+			from: 'node_modules/jquery/dist/jquery.slim.min.js'
+		}])
 	],
 	output: {
 		path: path.join(__dirname, 'extension'),