Release v3.0.0

.github/workflows/test.yml

@@ -0,0 +1,18 @@
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: yarn install --frozen-lockfile
+      - run: yarn playwright install --with-deps
+      - run: yarn playwright test

.gitignore

@@ -1,7 +1,7 @@
-*.zip
-*.pem
 tmp/
 dist/
-package-lock.json
-yarn.lock
 node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

LICENSE.txt

@@ -16,4 +16,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

README.md

@@ -1,41 +1,55 @@
 # View Background Image
-Chrome extension that adds "View background image" to the context menu
+
+Web Extension that adds "View background image" to the context menu
 
 ## Installation
 
-[![Available in the Chrome Web Store](https://user-images.githubusercontent.com/1075914/104359656-4698d600-5553-11eb-99d5-2344ac26b544.png)](https://chrome.google.com/webstore/detail/cegndknljaapfbnmfnagomhhgbajjibd) [![Get the add-on for Firefox](https://user-images.githubusercontent.com/1075914/104359743-64663b00-5553-11eb-8842-81c102a08a1a.png)](https://addons.mozilla.org/firefox/addon/view-background-images/)
+> [!NOTE]
+> The extension requires permission to read and change all your data on all websites for viewing background images.
+
+[![Available in the Chrome Web Store](https://user-images.githubusercontent.com/1075914/104359656-4698d600-5553-11eb-99d5-2344ac26b544.png)](https://chrome.google.com/webstore/detail/cegndknljaapfbnmfnagomhhgbajjibd)
 
-[Get the add-on for Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/lmpgechcgfhfamgjfcipjjpfjoknpccg)
+[![Get the add-on for Firefox](https://user-images.githubusercontent.com/1075914/104359743-64663b00-5553-11eb-8842-81c102a08a1a.png)](https://addons.mozilla.org/firefox/addon/view-background-images/)
 
-This extension requires permission to access your data on all websites only for viewing background images.
+[![Get the add-on for Microsoft Edge](https://user-images.githubusercontent.com/29514424/81471744-490d9800-922e-11ea-98fb-bceaf60d9c3d.png)](https://microsoftedge.microsoft.com/addons/detail/lmpgechcgfhfamgjfcipjjpfjoknpccg)
 
 ## Usage
 
-1. Install the extension and __reload tabs__.
-2. Open the context menu on the image that you want to view.
-3. Select `View background image`.
-4. The images under the mouse cursor will be displayed in new tabs.
+1. **Reload pages** after installing the extension
+2. Open the context menu on the images
+3. Select "View Background Image"
+4. The images will appear in a new tab
 
 ## Known Issues
 
-It is technically impossible to view background images:
-
-* [CSS Paint API](https://developers.google.com/web/updates/2018/01/paintapi?hl=en)
-* [Closed Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=en#closed) (e.g., [Embedded Tweets](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview.html))
-* Some inline SVGs
-
+- [CSS Paint API](https://developers.google.com/web/updates/2018/01/paintapi?hl=en)
+- [Closed Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=en#closed) (e.g., [Embedded Tweets](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview.html))
+- Some inline SVGs
 
 ## Contributing
 
 ### Translation
-I need your help with translating into the language you speak.
 
-1. Fork this repository.
-2. Edit `messages.json` in `src/_locales/[localeCode]`. If not exists, create a directory according to the [supported locales](https://developer.chrome.com/webstore/i18n?csw=1#localeTable).
-3. Create a new pull request.
+I especially need help translating into the language you speak.
+
+1. Fork this repository
+2. Edit `src/_locales/[localeCode]/messages.json`
+   - If not exists, create a directory according to [the supported locales](https://developer.chrome.com/webstore/i18n?csw=1#localeTable)
+3. Create a new pull request
+
+### Donation
+
+Your support will help me continue to develop and improve the extension.
+
+> [!IMPORTANT]
+> I've received many emails offering to buy the extension. If I accept them, it will be modified to collect your personal information. That's why your donation matters.
+
+[Donate](https://foooomio.net/extensions/donation)
 
 ## License
+
 This software is released under the [MIT License](https://github.com/foooomio/view-background-image/blob/master/LICENSE.txt).
 
 ## Author
-foooomio - [@foooomio](https://twitter.com/foooomio)
+
+foooomio - [foooomio.net](https://foooomio.net)

build.sh

@@ -3,7 +3,7 @@
 set -eux
 
 NAME="view-background-image"
-VERSION=$(jq -r .version src/manifest.json)
+VERSION="$(jq -r .version src/manifest.json)"
 
 mkdir -p dist
 rm dist/*.zip
@@ -13,4 +13,8 @@ zip -r "dist/${NAME}-${VERSION}-chrome.zip" src -x "*.DS_Store"
 
 # for Firefox
 cd src
+sed -i -e 's/"service_worker": "background.js"/"scripts": \["background.js"\]/' manifest.json
+
 zip -r "../dist/${NAME}-${VERSION}-firefox.zip" * -x "*.DS_Store"
+
+sed -i -e 's/"scripts": \["background.js"\]/"service_worker": "background.js"/' manifest.json

jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "checkJs": true
+  },
+  "typeAcquisition": {
+    "include": ["chrome"]
+  },
+  "include": ["src/**/*.js", "tests/**/*.js"],
+  "exclude": ["node_modules"]
+}

package.json

@@ -1,18 +1,19 @@
 {
-    "name": "view-background-image",
-    "version": "0.0.0",
-    "scripts": {
-        "build": "./build.sh",
-        "lint": "eslint . && editorconfig-checker",
-        "test": "mocha"
-    },
-    "private": true,
-    "license": "MIT",
-    "devDependencies": {
-        "@types/chrome": "*",
-        "editorconfig-checker": "*",
-        "eslint": "*",
-        "mocha": "*",
-        "puppeteer-core": "*"
-    }
+  "name": "view-background-image",
+  "version": "0.0.0",
+  "type": "module",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "test": "playwright test",
+    "format": "prettier --write .",
+    "format-check": "prettier --check ."
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.44.1",
+    "@types/chrome": "^0.0.268",
+    "@types/node": "^20.12.12",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.5"
+  }
 }

playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'github' : 'list',
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+  ],
+});

src/_locales/am/messages.json

@@ -1,20 +1,26 @@
 {
-    "extName": {
-        "message": "የበስተጀርባ ምስልን ይመልከቱ"
-    },
-    "extDescription": {
-        "message": "በአውድ ምናሌው ውስጥ \"የበስተጀርባ ምስልን ይመልከቱ\""
-    },
-    "title": {
-        "message": "የበስተጀርባ ምስልን ይመልከቱ"
-    },
-    "security": {
-        "message": "ለደህንነት ሲባል ቅጥያው በዚህ ገጽ ላይ አይሰራም።"
-    },
-    "reload": {
-        "message": "እባክዎ ትሩን እንደገና ይጫኑት።"
-    },
-    "failure": {
-        "message": "የበስተጀርባውን ምስል ማግኘት አልተሳካም።\nችግር ሪፖርት ያድርጉ?"
-    }
+  "extName": {
+    "message": "የበስተጀርባ ምስል ይመልከቱ"
+  },
+  "extDescription": {
+    "message": "ወደ አውድ ምናሌው «የበስተጀርባ ምስል ይመልከቱ» ያክላል።"
+  },
+  "review": {
+    "message": "ግምገማ"
+  },
+  "donation": {
+    "message": "ልገሳ"
+  },
+  "security": {
+    "message": "ቅጥያው በልዩ ገጾች ላይ እንዲሠራ አይፈቀድለትም።"
+  },
+  "reload": {
+    "message": "ቅጥያውን ከጫኑ ወይም ካዘመኑ በኋላ ገጾችን እንደገና ይጫኑ።"
+  },
+  "failure": {
+    "message": "የበስተጀርባ ምስሎችን ማየት አልተቻለም"
+  },
+  "report": {
+    "message": "ችግር ሪፖርት ያድርጉ?"
+  }
 }

src/_locales/bg/messages.json

@@ -1,20 +1,26 @@
 {
-    "extName": {
-        "message": "Преглед на фоновото изображение"
-    },
-    "extDescription": {
-        "message": "\"Преглед на фоновото изображение\" в контекстното меню."
-    },
-    "title": {
-        "message": "Преглед на фоновото изображение"
-    },
-    "security": {
-        "message": "Разширението не работи на тази страница от съображения за сигурност."
-    },
-    "reload": {
-        "message": "Моля, презаредете раздела."
-    },
-    "failure": {
-        "message": "Неуспешно получаване на фоновото изображение.\nДа докладвате за проблем?"
-    }
+  "extName": {
+    "message": "Преглед на фоново изображение"
+  },
+  "extDescription": {
+    "message": "Добавя „Преглед на фоново изображение“ към контекстното меню."
+  },
+  "review": {
+    "message": "Преглед"
+  },
+  "donation": {
+    "message": "Дарение"
+  },
+  "security": {
+    "message": "Разширението не може да се изпълнява на специални страници."
+  },
+  "reload": {
+    "message": "Презаредете страниците след инсталиране или актуализиране на разширението."
+  },
+  "failure": {
+    "message": "Не могат да се видят фонови изображения"
+  },
+  "report": {
+    "message": "Да докладвате за проблем?"
+  }
 }