diff --git a/package.json b/package.json index e360a6c..d76f21c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pagespeed-saver", - "version": "2.1.1", + "version": "2.1.2", "description": "", "main": "index.js", "scripts": { diff --git a/src/manifest.json b/src/manifest.json index 9c7e130..774f071 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "PageSpeed Saver", - "version": "2.1.1", + "version": "2.1.2", "icons": { "128": "icon128.png" }, "description": "Quickly save your PageSpeed Insights reports to JSON.", "content_scripts": [ diff --git a/src/script.js b/src/script.js index 6122ec3..b2c6184 100644 --- a/src/script.js +++ b/src/script.js @@ -1,5 +1,5 @@ /** - * PageSpeed Saver 2.1.1 + * PageSpeed Saver 2.1.2 * @defaced * * Source: https://github.com/workeffortwaste/pagespeed-saver/ @@ -29,18 +29,6 @@ reports: '++id, url, timestamp, device, score, json' }) - /** - * HTML payload for the mobile and desktop download report buttons - * @returns {string} HTML - */ - const payloadButtons = ` - - ` /** * CSS payload for unique styling for the HTML elements in this extension * @returns {string} HTML @@ -108,18 +96,20 @@ .pageSpeed_history__reports__list__item { display:grid; color:#5f6368; - grid-template-columns:94px 75px 50px 75px auto 46px 60px; + grid-template-columns:94px 75px 50px 75px auto 46px 79px; } .pageSpeed_history__reports__list__item__copy, .pageSpeed_history__reports__list__item__download{ font-size: 12px; line-height: 20px; - color: #757575; + color: #0368ff; text-transform: uppercase; - font-weight: 500; + font-weight: 600; letter-spacing: 0.8px; cursor: pointer; + display: grid; + align-content: center; } .pageSpeed_history{ @@ -130,13 +120,15 @@ background-color: #fff; border: 1px solid #dadce0; box-shadow: none; + margin-bottom: 12px; } .pageSpeed_history__reports__list__item { font-size:14px; border-bottom: 1px solid #ebebeb; padding:8px; - padding-left:0; + padding-left: 0; + padding-right: 0; line-height:24px; } @@ -149,54 +141,6 @@ padding-left:0; } - .pageSpeed_button{ - font-family: "Google Sans",Roboto,Arial,sans-serif; - line-height: 1.25rem; - font-size: .875rem; - letter-spacing: .0178571429em; - font-weight: 500; - text-transform: none; - min-width: auto; - background: none; - min-width: 90px; - display: flex; - flex: 1 0 auto; - justify-content: center; - box-sizing: border-box; - margin: 0; - border: none; - outline: none; - text-align: center; - white-space: nowrap; - cursor: pointer; - -webkit-appearance: none; - z-index: 1; - position:relative; - } - - .pageSpeed_button__container { - display: flex; - align-items: center; - justify-content: center; - height: inherit; - pointer-events: none; - place-self: center; - } - - .pageSpeed_button__container__text { - color: #5f6368; - transition: 150ms color linear; - display: inline-block; - line-height: 1; - z-index: 2; - } - - .pageSpeed_button:hover .pageSpeed_button__container__background{ - background-color: #f8f9fa; - position: absolute; - width: 100%; - height: 100%; - } .pageSpeed_history__reports__list__item span:nth-child(5){ color:black; padding-right:10px; @@ -255,7 +199,7 @@
-

Your previous reports

Download or copy to the clipboard your previous PageSpeed Insights reports.

+

Your reports

Download or copy to the clipboard your PageSpeed Insights reports.

@@ -313,9 +257,6 @@ * @param {obj} lighthouseData The Lighthouse report JSON */ const lighthouseWatcher = async (lighthouseData) => { - /* Trigger the button observer for the incoming device type */ - lighthouseData.configSettings.formFactor === 'desktop' ? buttonObserve('desktop') : buttonObserve('mobile') - /* Save to history */ const dbId = await db.reports.add({ device: lighthouseData.configSettings.formFactor, @@ -368,67 +309,6 @@ } }) - /** - * Inject the mobile and desktop download report buttons into the DOM. - * @param {string} device The device name (mobile|desktop) - */ - const buttonInject = (device) => { - /* If the pathname for the current state doesn't contain report then return */ - if (!window.location.pathname.includes('report')) return - - /* Fetch the most recent native button for the device param */ - const button = [...document.querySelectorAll(`*[aria-labelledby="${device}_tab"] button#url_tab`)].pop() - - /* Return if a current sibling (our button) exists */ - if (button.nextElementSibling) { return } - - /* Inject our button */ - button.insertAdjacentHTML('afterend', escapeHTMLPolicy.createHTML(payloadButtons)) - - /* Select our injected button */ - const newButton = button.nextElementSibling - - /* Attach an event to our button */ - newButton.addEventListener('click', async (e) => { - const id = saver[device] - const obj = await db.reports.get(id) - const json = JSON.parse(obj.json) - - /* Regex for filename sanitisation */ - const regex = /[*+~.()'"!:@]/g - - let filename = `${slugify(json.finalUrl)}-${slugify(json.configSettings.formFactor)}-${slugify(json.fetchTime)}.json` - filename = filename.replace(regex, '-') - - /* Save the file */ - FileSaver.saveAs(new Blob([JSON.stringify(json)]), filename) - }) - } - - /** - * Observe the specified tab panel for changes to automatically reinject our report buttons - * @param {string} device The device name (mobile|desktop) - */ - const buttonObserve = (device) => { - /* The most recent tab panel elements to watch for changes */ - const num = device === 'mobile' ? 0 : 1 - const target = [...document.querySelectorAll('div[role="tabpanel"] c-wiz')].slice(-2)[num] - - const callback = async (mutationsList, observer) => { - /* Destroy the observer */ - observer.disconnect() - - /* A quick pause to wait for the DOM to render changes */ - await sleep(1000) - - /* Inject our button */ - buttonInject(device) - } - - const observer = new MutationObserver(callback) - observer.observe(target, { attributes: true, childList: true, subtree: true }) - } - /** * ES6 sleep * Sleep for the specified amount of time @@ -506,10 +386,6 @@ */ const formObserve = () => { const callback = async (mutationsList, observer) => { - /* Trigger the tab panel button injections */ - buttonInject('mobile') - buttonInject('desktop') - if (document.querySelectorAll('.pageSpeed_history').length === 0) { const formElement = [...document.querySelectorAll('form')].pop() formElement.insertAdjacentHTML('afterend', escapeHTMLPolicy.createHTML(payloadHistory()))