diff --git a/build/build-extension.js b/build/build-extension.js index d4735538d5ee..b93d155ca87e 100644 --- a/build/build-extension.js +++ b/build/build-extension.js @@ -13,11 +13,15 @@ const cpy = require('cpy'); const browserify = require('browserify'); const path = require('path'); +const argv = process.argv.slice(2); +const browserBrand = argv[0]; + const sourceName = 'popup.js'; const distName = 'popup-bundle.js'; -const sourceDir = __dirname + '/../clients/extension'; -const distDir = __dirname + '/../dist/extension'; +const sourceDir = `${__dirname}/../clients/extension`; +const distDir = `${__dirname}/../dist/extension-${browserBrand}`; +const packagePath = `${distDir}/../extension-${browserBrand}-package`; const manifestVersion = require(`${sourceDir}/manifest.json`).version; @@ -30,13 +34,17 @@ async function buildEntryPoint() { const bundleStream = browserify(inFile).bundle(); await mkdir(path.dirname(outFile), {recursive: true}); - return new Promise((resolve, reject) => { + await new Promise((resolve, reject) => { const writeStream = fs.createWriteStream(outFile); writeStream.on('finish', resolve); writeStream.on('error', reject); bundleStream.pipe(writeStream); }); + + let outCode = fs.readFileSync(outFile, 'utf-8'); + outCode = outCode.replace('___BROWSER_BRAND___', browserBrand); + fs.writeFileSync(outFile, outCode); } /** @@ -48,7 +56,6 @@ function copyAssets() { 'styles/**/*.css', 'images/**/*', 'manifest.json', - '_locales/**', // currently non-functional ], distDir, { cwd: sourceDir, parents: true, @@ -61,7 +68,6 @@ function copyAssets() { * @return {Promise} */ async function packageExtension() { - const packagePath = `${distDir}/../extension-package`; await mkdir(packagePath, {recursive: true}); return new Promise((resolve, reject) => { @@ -81,15 +87,12 @@ async function packageExtension() { } async function run() { - const argv = process.argv.slice(2); - if (argv.includes('package')) { - return packageExtension(); - } - await Promise.all([ buildEntryPoint(), copyAssets(), ]); + + await packageExtension(); } run(); diff --git a/clients/extension/_locales/en/messages.json b/clients/extension/_locales/en/messages.json deleted file mode 100644 index 8e35fe9572c7..000000000000 --- a/clients/extension/_locales/en/messages.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "appName": { - "message": "Lighthouse", - "description": "Helping you avoid Progressive Web App woes." - }, - "appDescription": { - "message": "Lighthouse", - "description": "Helping you avoid Progressive Web App woes." - } -} diff --git a/clients/extension/_locales/en/messages_canary.json b/clients/extension/_locales/en/messages_canary.json deleted file mode 100644 index 92c4d9fa6d64..000000000000 --- a/clients/extension/_locales/en/messages_canary.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "appName": { - "message": "Lighthouse Canary", - "description": "Alpha: Helping you avoid Progressive Web App woes." - }, - "appDescription": { - "message": "Lighthouse Canary", - "description": "Alpha: Helping you avoid Progressive Web App woes." - } -} diff --git a/clients/extension/manifest.json b/clients/extension/manifest.json index 218f3a4c04e6..c537cd5cd830 100644 --- a/clients/extension/manifest.json +++ b/clients/extension/manifest.json @@ -1,14 +1,13 @@ { - "name": "__MSG_appName__", - "version": "100.0.0.0", + "name": "Lighthouse", + "version": "100.0.0.1", "minimum_chrome_version": "72", "manifest_version": 2, - "description": "__MSG_appDescription__", + "description": "Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.", "icons": { "16": "images/lh_favicon_16x16.png", "128": "images/lh_logo_128x128.png" }, - "default_locale": "en", "permissions": [ "activeTab", "storage" diff --git a/clients/extension/popup.html b/clients/extension/popup.html index c099cc44032d..fae278fa8829 100644 --- a/clients/extension/popup.html +++ b/clients/extension/popup.html @@ -28,13 +28,21 @@ Uses the PSI API
-
-

Chrome DevTools

- - You can also run Lighthouse via the DevTools Audits panel. -

- Shortcut to open DevTools: -
+
+ +
diff --git a/clients/extension/scripts/popup.js b/clients/extension/scripts/popup.js index 47c93c482977..fefd0d72e2ef 100644 --- a/clients/extension/scripts/popup.js +++ b/clients/extension/scripts/popup.js @@ -9,6 +9,19 @@ const SettingsController = require('./settings-controller.js'); const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/'; const optionsVisibleClass = 'main--options-visible'; +// Replaced with 'chrome' or 'firefox' in the build script. +/** @type {string} */ +const BROWSER_BRAND = '___BROWSER_BRAND___'; + +const CHROME_STRINGS = { + localhostErrorMessage: 'Use DevTools to audit pages on localhost.', +}; + +const FIREFOX_STRINGS = { + localhostErrorMessage: 'Use the Lighthouse Node CLI to audit pages on localhost.', +}; + +const STRINGS = BROWSER_BRAND === 'chrome' ? CHROME_STRINGS : FIREFOX_STRINGS; /** * Guaranteed context.querySelector. Always returns an element or throws if @@ -120,7 +133,7 @@ function getSiteUrl() { const url = new URL(tabs[0].url); if (url.hostname === 'localhost') { - reject(new Error('Use DevTools to audit pages on localhost.')); + reject(new Error(STRINGS.localhostErrorMessage)); } else if (/^(chrome|about)/.test(url.protocol)) { reject(new Error(`Cannot audit ${url.protocol}// pages.`)); } else { @@ -134,7 +147,11 @@ function getSiteUrl() { * Initializes the popup's state and UI elements. */ async function initPopup() { - fillDevToolsShortcut(); + if (BROWSER_BRAND === 'chrome') { + fillDevToolsShortcut(); + } + const browserBrandEl = find(`.browser-brand--${BROWSER_BRAND}`); + browserBrandEl.classList.remove('hidden'); const mainEl = find('main'); const optionsEl = find('.button--configure'); diff --git a/clients/extension/styles/lighthouse.css b/clients/extension/styles/lighthouse.css index 44e43470e99d..17e9779eb9d2 100644 --- a/clients/extension/styles/lighthouse.css +++ b/clients/extension/styles/lighthouse.css @@ -46,6 +46,10 @@ body { padding: 16px; } +.hidden { + display: none; +} + .header__icon { margin: 2px auto 0; } @@ -102,13 +106,13 @@ body { padding-bottom: 10px; } -.devtools-header { +.section-header { font-size: var(--font-size); font-weight: 500; margin-bottom: 5px; } -.devtools-note { +.section--description { font-size: 14px; color: grey; } diff --git a/clients/test/extension/popup-test.js b/clients/test/extension/popup-test.js index c7ad3d468385..a1f3c3c4d628 100644 --- a/clients/test/extension/popup-test.js +++ b/clients/test/extension/popup-test.js @@ -12,7 +12,7 @@ const puppeteer = require('../../../node_modules/puppeteer/index.js'); const {DEFAULT_CATEGORIES, STORAGE_KEYS} = require('../../extension/scripts/settings-controller.js'); -const lighthouseExtensionPath = path.resolve(__dirname, '../../../dist/extension'); +const lighthouseExtensionPath = path.resolve(__dirname, '../../../dist/extension-chrome'); const mockStorage = { [STORAGE_KEYS.Categories]: { @@ -68,6 +68,11 @@ describe('Lighthouse chrome popup', function() { getManifest: () => ({}), }), }); + Object.defineProperty(chrome, 'i18n', { + get: () => ({ + getMessage: () => '__LOCALIZED_STRING__', + }), + }); }, mockStorage); await page.goto('file://' + path.join(lighthouseExtensionPath, 'popup.html'), {waitUntil: 'networkidle2'}); diff --git a/docs/releasing.md b/docs/releasing.md index a3b5b681ff5d..ab8b233caa43 100644 --- a/docs/releasing.md +++ b/docs/releasing.md @@ -140,7 +140,7 @@ npm publish # Publish viewer. yarn deploy-viewer -# Publish the extension (if it changed). +# Publish the extensions (if it changed). open https://chrome.google.com/webstore/developer/edit/blipmdconlkpinefehnmjammfjpmpbjk cd dist/extension-package/ echo "Upload the package zip to CWS dev dashboard..." @@ -151,6 +151,8 @@ echo "Upload the package zip to CWS dev dashboard..." # Select `lighthouse-X.X.X.X.zip` # _Publish_ at the bottom +# For Firefox: https://addons.mozilla.org/en-US/developers/addon/google-lighthouse/versions/submit/ + # * Tell the world!!! * echo "Complete the _Release publicity_ tasks documented above" diff --git a/lighthouse-core/scripts/release/prepare-package.sh b/lighthouse-core/scripts/release/prepare-package.sh index ac175968ef42..2e3ffe3b8241 100755 --- a/lighthouse-core/scripts/release/prepare-package.sh +++ b/lighthouse-core/scripts/release/prepare-package.sh @@ -28,9 +28,6 @@ yarn install # Build everything yarn build-all -# Package the extension -node build/build-extension.js package - # Verify the npm package won't include unncessary files npm pack --dry-run npx pkgfiles diff --git a/package.json b/package.json index 1b36de5c5575..fd9c0989be19 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,9 @@ "build-all:task": "(yarn build-cdt-lib & yarn build-extension & yarn build-devtools & yarn build-lr & yarn build-viewer & wait) && yarn build-pack", "build-all:task:windows": "yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer", "build-cdt-lib": "node ./build/build-cdt-lib.js", - "build-extension": "node ./build/build-extension.js", + "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox", + "build-extension-chrome": "node ./build/build-extension.js chrome", + "build-extension-firefox": "node ./build/build-extension.js firefox", "build-devtools": "yarn link && yarn link lighthouse && node ./build/build-bundle.js clients/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js", "build-lr": "node ./build/build-lightrider-bundles.js", "build-pack": "bash build/build-pack.sh", @@ -179,7 +181,7 @@ }, "bundlesize": [ { - "path": "./dist/extension/scripts/popup-bundle.js", + "path": "./dist/extension-chrome/scripts/popup-bundle.js", "maxSize": "15 kB" }, {