A web Extension to show kakaku.com prices on PCPartPicker. Currently only on the 'Saved Parts Lists' page and 'Choose Your Parts' page.
This project was initially created using the react-typescript-web-extension-starter template.
- Search and link a PCPartPicker part to a kakaku.com product.
- You can also link a particular search query instead of an explicit item. The first item of the search result is used to display the price.
- Hide PCPartPicker's price column.
- Dark mode is in sync with the PCPartPicker's dark mode.
Not completed
- Japanese localization (help needed, see this discussion)
Getting Started
Run the following commands to install dependencies and start developing
yarn install
yarn dev
Scripts
yarn dev
- runwebpack
inwatch
modeyarn storybook
- runs the Storybook serveryarn web-ext:chrome
- Runs Chrome in a new profile and installs the extensionyarn web-ext:firefox-v2
- Runs Firefox in a new profile and installs the manifest v2 version of the extensionyarn web-ext:firefox-v3
- Runs Firefox in a new profile and installs the manifest v3 version of the extension (Please read below for further instructions)yarn build
- builds the production-ready unpacked extensionyarn test -u
- runs Jest + updates test snapshots (currently no noteworthy jest tests added)yarn lint
- runs EsLintyarn prettify
- runs Prettier
Loading the extension in a chromium based browser (Google Chrome, Microsoft Edge, Brave, etc)
There are two ways of running the extension in a chromium based browser. Make sure you have already run yarn dev
or yarn build
.
- Using the web-ext tool (Recommended): Run
yarn web-ext:chrome
. This will start the browser using a new profile and install the extension. For configuration options checkweb-ext.chrome.config.js
. See all available configuration options here. - Manual: In Google Chrome, open up chrome://extensions in a new tab. Make sure the
Developer Mode
checkbox in the upper-right corner is turned on. ClickLoad unpacked
and select thedist/chrome
directory in this repository - your extension should now be loaded. This process will be similar for all chromium based browsers.
Loading the extension in Mozilla Firefox
There are two ways of running the extension in Mozilla Firefox. Make sure you have already run yarn dev
or yarn build
.
- Using the web-ext tool (Recommended):
- For manifest v2 version: Run
yarn web-ext:firefox-v2
. This will start the browser using a new profile and install the extension. For configuration options checkweb-ext.firefox.v2.config.js
. See all available configuration options here. - For manifest v3 version: Run
yarn web-ext:firefox-v3
. This will start the browser using a new profile and install the extension. Currently you will have to manually grant the extension the permissions to access pcpricepicker.com and kakaku.com. To do this openabout:addons
, click the extension, go to thePermissions
tab, and enable the disabled permissions. For more run configuration options checkweb-ext.firefox.v2.config.js
. See all available configuration options here.
- For manifest v2 version: Run
- Manual:
- For manifest v2 version: In Mozilla Firefox, open up the about:debugging page in a new tab. Click the
This Firefox
link in the sidebar. One theThis Firefox
page, click theLoad Temporary Add-on...
button and select themanifest.json
from thedist/firefox/v2
directory in this repository - your extension should now be loaded. - For manifest v3 version: First follow the instructions mentioned here. Then follow the instructions mentioned for the manifest v2 version but load the
dist/firefox/v3
directory.
- For manifest v2 version: In Mozilla Firefox, open up the about:debugging page in a new tab. Click the
Notes
-
Includes ESLint configured to work with TypeScript and Prettier.
-
Includes tests with Jest - note that the
babel.config.js
and associated dependencies are only necessary for Jest to work with TypeScript. -
Recommended to use
Visual Studio Code
with theFormat on Save
setting turned on. -
Icons courtesy of Heroicons.
-
Includes Storybook configured to work with React + TypeScript. Note that it maintains its own
webpack.config.js
andtsconfig.json
files. -
Includes a custom mock for the webextension-polyfill-ts package in
src/__mocks__
. This allows you to mock any browser APIs used by your extension so you can develop your components inside Storybook.
Built with
- React
- TypeScript
- Storybook
- Jest
- Eslint
- Prettier
- Webpack
- Babel
- TailwindCSS
- Flowbite
- webextension-polyfill
Misc. References
- Chrome Extension Developer Guide
- Firefox Extension Developer Guide
- Eslint + Prettier + Typescript Guide
Price Part Picker
Copyright (C) 2022 Ammar Githam
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.