├── .babelrc
├── .env
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── CODETOUR.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── config
    ├── env.js
    ├── paths.js
    └── webpack
    │   ├── loaders.js
    │   ├── plugins.js
    │   ├── static-files.js
    │   ├── webpack.config.js
    │   └── webpackDevServer.config.js
├── development.md
├── package-lock.json
├── package.json
├── screenshots
    ├── apply.png
    ├── recording.gif
    └── search.png
├── scripts
    ├── build.js
    ├── chrome-launch.js
    ├── compress.js
    ├── dev.js
    └── start.js
└── src
    ├── background
        └── index.js
    ├── content_scripts
        └── index.js
    ├── fonts
        └── googlefonts
        │   ├── noto-sans.css
        │   └── roboto-mono.css
    ├── img
        ├── background.png
        └── posterizer-icon.png
    ├── lib
        └── js
        │   └── plex.js
    ├── manifest.json
    └── popup
        ├── App.css
        ├── App.js
        ├── components
            ├── plexLogin.js
            ├── searchItem.js
            ├── searchPage.js
            ├── settingsPage.js
            └── topBar.js
        ├── dataStore.js
        ├── index.css
        └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": [
3 |         "@babel/preset-env",
4 |         "@babel/preset-react"
5 |     ],
6 |     "plugins": [
7 |         "@babel/plugin-proposal-class-properties"
8 |     ]
9 | }


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | GENERATE_SOURCEMAP=false
2 | INLINE_RUNTIME_CHUNK=false


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /dist
2 | /node_modules
3 | /dev
4 | /extension


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     commonjs: true,
 5 |     es6: true,
 6 |     node: true,
 7 |     jest: true
 8 |   },
 9 |   extends: 'eslint:recommended',
10 |   parser: 'babel-eslint',
11 |   parserOptions: {
12 |     sourceType: 'module',
13 |     ecmaVersion: 2018,
14 |     ecmaFeatures: {
15 |       jsx: true,
16 |     },
17 |   },
18 |   plugins: ['react'],
19 |   rules: {
20 |     "no-console": "off",
21 |     "no-underscore-dangle": "off",
22 |     "no-plusplus": "off",
23 |     "no-continue": "off",
24 |     "camelcase": "off",
25 |     "no-empty": "off",
26 |     "no-param-reassign": "off",
27 |     "func-names": [
28 |       "error",
29 |       "never"
30 |     ],
31 |     "prefer-destructuring": [
32 |       "error",
33 |       {
34 |         "object": false,
35 |         "array": false
36 |       }
37 |     ],
38 |     indent: ['error', 2, { SwitchCase: 1 }],
39 |     quotes: ['error', 'single', { allowTemplateLiterals: true }],
40 |     semi: ['error', 'always'],
41 |     'react/jsx-uses-vars': 1,
42 |     'react/jsx-uses-react': 1,
43 |     'spaced-comment': ['error', 'always', { exceptions: ['-', '+'] }],
44 |   },
45 | };


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | try.js
3 | old-extension
4 | dist
5 | extension
6 | dev
7 | .vscode


--------------------------------------------------------------------------------
/CODETOUR.md:
--------------------------------------------------------------------------------
 1 | # Code Tour
 2 | 
 3 | A quick introduction to the folders and files in this repo.
 4 | 
 5 | ## Project anatomy
 6 | 
 7 | The **source** files which you will need to build the extension are present inside the [`src`](src) folder. Run `npm run chrome-launch` or `npm run firefox-launch` to see the changes that you make inside your `src` folder live in the browser.
 8 | 
 9 | The project uses **Webpack** to bundle the project into a folder like `extension` in case of *production* build and `dev` in case of *development* build. A lot of different webpack plugins are used for the webpack bundling process which can be seen inside the [`config/webpack/plugins.js`](config/webpack/plugins.js) file.
10 | A big thanks to the [`Memex`](https://github.com/WorldBrain/Memex) project for helping in setting up the boilerplate code and to  Facebook's [`create-react-app`](https://github.com/facebook/create-react-app) for helping in setup the webpack config.
11 | 
12 | ## Source Organisation: [`src/`](src)
13 | 
14 | To keep things modular, the resources are divided into folders namely `/background`, `/content_scripts`, `/options`, `/popup` and `/sidebar` and `manifest.json`. We can obviously introduce more as required.
15 | 
16 | - ### [`/lib`](src/lib): Contains JS and CSS libraries which are not to be compiled and minified by webpack.
17 | 
18 |   The `/lib` folder is copied as it is to the build folder which is `extension` during production build and `dev` during development build. If you have vendor libraries like bootstrap.css, you can put it inside the lib folder. This comes handy when you have to used `chrome.tabs.executeScript()`, the script to be injected can be placed here.
19 | 
20 |   - [/lib/css](src/lib/css): Contains CSS files    
21 |   - [/lib/js](src/lib/js): Contains JS files    
22 | 
23 | - ### [`background`](src/background/): Contains scripts relating to the extension background page. 
24 | 
25 |   - [**`index.js`**](src/background/index.js): All the contents of the background page goes inside the [index.js](src/background/index.js) file.
26 |   Webpack bundles the `index.js` into `background.js` in the build folder. This allows the use of `import` and `require` statements inside the background page. All others scripts for background are refreneced here. 
27 | 
28 | - ### [`content_scripts`](src/content_scripts/): Contains scripts relating to the extension content_scripts page. 
29 | 
30 |   Webpack bundles the `index.js` into `content_scripts.js` in the build folder.
31 | 
32 |   - [`index.js`](src/content_scripts/index.js):  All the contents of the background page goes inside the [index.js](src/content_scripts/index.js) file.
33 |   Webpack bundles the `index.js` into `content.js` in the build folder. This allows the use of `import` and `require` statements inside the background page.All others scripts for content_scripts are refreneced here.
34 | 
35 | - ### [`popup`](src/popup/): Contains scripts relating to the extension popup page. 
36 | 
37 |   Webpack bundles the `index.js` into `popup.js` in the build folder which is referenced inside the `popup.html`.
38 | 
39 |   - [`index.js`](src/popup/index.js): Main file which webpack looks for while bundling. All others scripts for popup are refreneced here.
40 |   - [`template.html`](src/popup/template.html) - Provides the base for popup.html. All scripts and CSS file tags are added dynamically using Webpack at compile time.
41 | 
42 | - ### [`options`](src/options/): Contains scripts relating to the extension options page. 
43 | 
44 |   Webpack bundles the `index.js` into `options.js` in the build folder which is referenced inside the `options.html`.
45 | 
46 |   - [`index.js`](src/options/index.js): Main file which webpack looks for while bundling. All others scripts for options are refreneced here.
47 |   - [`template.html`](src/options/template.html) - Provides the base for options.html. All scripts and CSS file tags are added dynamically using Webpack at compile time.
48 | 
49 | - ### [`fonts`](src/fonts/): Contains CSS files for fonts used in the extension. 
50 |   
51 | - ### [`images`](src/img/): Contains images used in the extension 
52 | 
53 | ## [`Config folder`](config) : 
54 | 
55 | - [`webpack/`](config/webpack): Contains the webpack config file and all the files necessary for setting up the webpack config.
56 | - [`env.js`](config/env.js): Loads environment variables from `.env` . Reference taken from https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/env.js 
57 | - [`paths.js`](config/paths.js): Returns an API that provides absolute paths for different files inside this project . Reference taken from https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/paths.js 
58 | 
59 | ## Other Config files
60 | 
61 | - [`package.json`](package.json) - Contains project dependencies, info about project and run commands.
62 | 
63 | - [`package-lock.json`](package-lock.json): npm config file (genertaed alongwith package.json). This shouldn't be modified unless you're adding new dependencies or updating them.
64 | - [`.eslintrc.js`](.eslintrc.js): ESLint config file
65 | - [`.eslintignore`](.eslintrc.js): Files to be ignored by ESLint.
66 | - [`.babelrc`](.babelrc): Babel config file.
67 | - [`.storybook`](.storybook): Config to setup storybook.
68 | ## Others
69 | 
70 | - [`.gitignore`](.gitignore): Contains a list of files and folders to be ignored by git. [More about gitignore..](https://medium.com/@haydar_ai/learning-how-to-git-ignoring-files-and-folders-using-gitignore-177556afdbe3)
71 | - [`LICENSE`](LICENSE): license file. A software license tells others what they can and can't do with your source code. The most common licenses for open source projects are MIT, Apache, GNU... licenses. The license used in this project is the MIT license.
72 | 
73 | ### MARKDOWNS
74 | 
75 | - [`README.md`](CONTRIBUTING.md): Introduction to this project along with instructions to build and contribute to this project.
76 | 
77 | - [`CONTRIBUTING.md`](CONTRIBUTING.md): Deatiled instructions on contributing to this project.
78 | 
79 | - [`CODETOUR.md`](CODETOUR.md): A tour through all the files and folders of this project.
80 | 
81 | Please feel free to make changes to the above documentation :)


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Thank You
 2 | 
 3 | We are grateful that you considered contributing to React Extension Boilerplate. Please follow the below guidelines for contribution.
 4 | 
 5 | Follow the golden rule
 6 | 
 7 | > Code, Document, Raise Issues and Review like you have to explain everything to a new developer without saying a word.
 8 | 
 9 | ## First Time
10 | 
11 | The first thing to do always is to run the program and note how it works. One of the best ways to do this is to launch the application and go through the files that it launches in the sequential manner.
12 | 
13 | Also take a note of the coding style and dependencies that the project follows.
14 | 
15 | ## Choosing issues
16 | 
17 | It is recommended to go through the issues tab once you have ran the program once and look for easy issues.
18 | 
19 | If an issue is not assigned; follow through the comments, ask queries about it and then start working on it.
20 | 
21 | ## Creating issues
22 | 
23 | If you face any reproducable problem while launching the boilerplate or any feature you think should be there, file an issue in the github repository.
24 | 
25 | It is expected that you will follow the below guidelines while creating issues:
26 | 
27 | https://wiredcraft.com/blog/how-we-write-our-github-issues
28 | 
29 | ## Sending a PR
30 | 
31 | While sending a PR, always remember not to send one from your master branch; it'll lead to commit issues and mismatch. 
32 | 
33 | It is highly recommended to follow the below guidelines while writing commits and sending PRs:
34 | 
35 | - https://blog.github.com/2015-01-21-how-to-write-the-perfect-pull-request/
36 | - https://code.likeagirl.io/useful-tips-for-writing-better-git-commit-messages-808770609503
37 | 
38 | ## Communication
39 | 
40 | Please join the [gitter channel](https://gitter.im/react-boilerplate-extension/community) for communication regarding the project. No personal communication will be entertained :)
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | 
 2 | MIT License
 3 | 
 4 | Copyright (c) 2019 Minanshu Singh
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Posterizer browser extension for PosterDB and Plex
 2 | 
 3 | Posterizer is made to quickly POST image URLs to Plex Media Server directly from the web while browsing poster sets on [ThePosterDB.com](https://theposterdb.com/)
 4 | 
 5 | When looking at a TV show poster set while logged into ThePosterDB, the extension can be used to search for a show in your Plex library. Once a show is selected, the extension parses the HTML to find download URLs of each season poster and matches it up to the corresponding season in Plex which results in a list of POST URLs that can be used to update plex images. This means you don't need to right click on each image's download button, copy the url, then walk through the Plex edit menus and paste the URL - saving a crazy amount of time with no additional requests to either Plex or the PosterDB!
 6 | 
 7 | #### Screenshots
 8 | Search                     |  Apply                    |  Recording               |
 9 | :-------------------------:|:-------------------------:|:-------------------------:
10 | <img src="https://raw.githubusercontent.com/cbackas/Posterizer-Extension/master/screenshots/search.png" width="300" /> | <img src="https://raw.githubusercontent.com/cbackas/Posterizer-Extension/master/screenshots/apply.png" width="300" /> | <img src="https://raw.githubusercontent.com/cbackas/Posterizer-Extension/master/screenshots/recording.gif" width="300" />
11 | 
12 | ### ToDo before it would be ready for public use:
13 | <em>
14 |   
15 |   :white_check_mark: Plex oAUTH instead of simple form/API combo <br/>
16 |   :white_check_mark: Ability to clear auth and cache <br/>
17 |   :white_check_mark: Replace hard coded IP address calls to Plex API<br/>
18 |   :white_check_mark: Fix matching for 'Specials' posters <br/>
19 |   :large_orange_diamond: Detect API failure and respond appropriately <br/>
20 |   :x: Movie/Collection compatability? <br/>
21 |   :x: **PosterDB API instead of pulling from HTML** <br/>
22 | 
23 | </em>
24 | 
25 | ## License
26 | 
27 | The code is available under the [MIT license](LICENSE).
28 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const fs = require('fs');
 3 | const url = require('url');
 4 | 
 5 | require('colors');
 6 | 
 7 | const appDirectory = fs.realpathSync(process.cwd());
 8 | console.log(`appDirectory: ${appDirectory}`.yellow);
 9 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
10 | console.log(resolveApp('.env').yellow);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | const resolveModule = (resolveFn, filePath) => {
56 |   const extension = moduleFileExtensions.find(extension =>
57 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
58 |   );
59 | 
60 |   if (extension) {
61 |     return resolveFn(`${filePath}.${extension}`);
62 |   }
63 | 
64 |   return resolveFn(`${filePath}.js`);
65 | };
66 | 
67 | module.exports = {
68 |   dotenv: resolveApp('.env'),
69 |   appPath: resolveApp('.'),
70 |   appBuild: resolveApp('build'),
71 |   appExtension: resolveApp('extension'),
72 |   appDev: resolveApp('dev'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appTemplate: resolveApp('config/template.html'),
76 |   optionsTemplate: resolveApp('src/options/template.html'),
77 |   sidebarTemplate: resolveApp('src/sidebar/template.html'),
78 |   popupTemplate: resolveApp('src/popup/template.html'),
79 |   appOptionsJs: resolveModule(resolveApp, 'src/options/index'),
80 |   appPopupJs: resolveModule(resolveApp, 'src/popup/index'),
81 |   appSidebarJs: resolveModule(resolveApp, 'src/sidebar/index'),
82 |   appBackgroundJs: resolveModule(resolveApp, 'src/background/index'),
83 |   appContentJs: resolveModule(resolveApp, 'src/content_scripts/index'),
84 |   appPackageJson: resolveApp('package.json'),
85 |   appSrc: resolveApp('src'),
86 |   appTsConfig: resolveApp('tsconfig.json'),
87 |   yarnLockFile: resolveApp('yarn.lock'),
88 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
89 |   proxySetup: resolveApp('src/setupProxy.js'),
90 |   appNodeModules: resolveApp('node_modules'),
91 |   publicUrl: getPublicUrl(resolveApp('package.json')),
92 |   servedPath: getServedPath(resolveApp('package.json')),
93 | };
94 | 
95 | 
96 | 
97 | module.exports.moduleFileExtensions = moduleFileExtensions;
98 | 


--------------------------------------------------------------------------------
/config/webpack/loaders.js:
--------------------------------------------------------------------------------
  1 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
  2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3 | 
  4 | // NOTE: Loader `include` paths are relative to this module
  5 | const paths = require('../paths');
  6 | 
  7 | const cssRegex = /\.css$/;
  8 | const cssModuleRegex = /\.module\.css$/;
  9 | 
 10 | 
 11 | 
 12 | 
 13 | const getLoaders = (isEnvProduction = false, isEnvDevelopment = true, shouldUseRelativeAssetPaths = true, shouldUseSourceMap = false) => {
 14 | 
 15 |   const getStyleLoaders = (cssOptions, preProcessor) => {
 16 |     const styleLoaders = [
 17 |       isEnvDevelopment && require.resolve('style-loader'),
 18 |       isEnvProduction && {
 19 |         loader: MiniCssExtractPlugin.loader,
 20 |         options: Object.assign(
 21 |           {},
 22 |           shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
 23 |         ),
 24 |       },
 25 |       {
 26 |         loader: require.resolve('css-loader'),
 27 |         options: cssOptions,
 28 |       },
 29 |       {
 30 |         loader: require.resolve('postcss-loader'),
 31 |         options: {
 32 |           ident: 'postcss',
 33 |           plugins: () => [
 34 |             require('postcss-flexbugs-fixes'),
 35 |             require('postcss-preset-env')({
 36 |               autoprefixer: {
 37 |                 flexbox: 'no-2009',
 38 |               },
 39 |               stage: 3,
 40 |             }),
 41 |           ],
 42 |           sourceMap: isEnvProduction && shouldUseSourceMap,
 43 |         },
 44 |       },
 45 |     ].filter(Boolean);
 46 |     if (preProcessor) {
 47 |       styleLoaders.push({
 48 |         loader: require.resolve(preProcessor),
 49 |         options: {
 50 |           sourceMap: isEnvProduction && shouldUseSourceMap,
 51 |         },
 52 |       });
 53 |     }
 54 |     return styleLoaders;
 55 |   };
 56 | 
 57 |   const eslintLoader = {
 58 |     test: /\.(js|mjs|jsx)$/,
 59 |     enforce: 'pre',
 60 |     use: [
 61 |       {
 62 |         options: {
 63 |           formatter: require.resolve('react-dev-utils/eslintFormatter'),
 64 |           eslintPath: require.resolve('eslint'),
 65 | 
 66 |         },
 67 |         loader: require.resolve('eslint-loader'),
 68 |       },
 69 |     ],
 70 |     include: paths.appSrc,
 71 |   };
 72 | 
 73 |   const urlLoader = {
 74 |     test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
 75 |     loader: require.resolve('url-loader'),
 76 |     options: {
 77 |       limit: 10000,
 78 |       name: 'static/media/[name].[hash:8].[ext]',
 79 |     },
 80 |   };
 81 |   // Process application JS with Babel.
 82 |   // The preset includes JSX, Flow, TypeScript, and some ESnext features.
 83 |   const insideBabelLoader = {
 84 |     test: /\.(js|mjs|jsx|ts|tsx)$/,
 85 |     include: paths.appSrc,
 86 |     loader: require.resolve('babel-loader'),
 87 |     options: {
 88 |       customize: require.resolve(
 89 |         'babel-preset-react-app/webpack-overrides'
 90 |       ),
 91 | 
 92 |       plugins: [
 93 |         [
 94 |           require.resolve('babel-plugin-named-asset-import'),
 95 |           {
 96 |             loaderMap: {
 97 |               svg: {
 98 |                 ReactComponent:
 99 |                   '@svgr/webpack?-prettier,-svgo![path]',
100 |               },
101 |             },
102 |           },
103 |         ],
104 |       ],
105 |       cacheCompression: isEnvProduction,
106 |       compact: isEnvProduction,
107 |     },
108 |   };
109 |   // Process any JS outside of the app with Babel.
110 |   // Unlike the application JS, we only compile the standard ES features.
111 |   const outsideBabelLoader = {
112 |     test: /\.(js|mjs)$/,
113 |     exclude: /@babel(?:\/|\\{1,2})runtime/,
114 |     loader: require.resolve('babel-loader'),
115 |     options: {
116 |       babelrc: false,
117 |       configFile: false,
118 |       compact: false,
119 |       presets: [
120 |         [
121 |           require.resolve('babel-preset-react-app/dependencies'),
122 |           { helpers: true },
123 |         ],
124 |       ],
125 |       cacheDirectory: true,
126 |       cacheCompression: isEnvProduction,
127 |       sourceMaps: false,
128 |     },
129 |   };
130 |   // "postcss" loader applies autoprefixer to our CSS.
131 |   // "css" loader resolves paths in CSS and adds assets as dependencies.
132 |   // "style" loader turns CSS into JS modules that inject <style> tags.
133 |   // In production, we use MiniCSSExtractPlugin to extract that CSS
134 |   // to a file, but in development "style" loader enables hot editing
135 |   // of CSS.
136 |   // By default we support CSS Modules with the extension .module.css
137 |   const styleLoader = {
138 |     test: cssRegex,
139 |     exclude: cssModuleRegex,
140 |     use: getStyleLoaders({
141 |       importLoaders: 1,
142 |       sourceMap: isEnvProduction && shouldUseSourceMap,
143 |     }),
144 |     sideEffects: true,
145 |   };
146 |   // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
147 |   // using the extension .module.css
148 |   const cssModuleLoader = {
149 |     test: cssModuleRegex,
150 |     use: getStyleLoaders({
151 |       importLoaders: 1,
152 |       sourceMap: isEnvProduction && shouldUseSourceMap,
153 |       modules: true,
154 |       getLocalIdent: getCSSModuleLocalIdent,
155 |     }),
156 |   };
157 | 
158 |   const fileLoader = {
159 |     loader: require.resolve('file-loader'),
160 |     exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
161 |     options: {
162 |       name: 'static/media/[name].[hash:8].[ext]',
163 |     },
164 |   };
165 | 
166 |   return {
167 |     eslintLoader,
168 |     urlLoader,
169 |     insideBabelLoader,
170 |     outsideBabelLoader,
171 |     styleLoader,
172 |     cssModuleLoader,
173 |     fileLoader
174 |   };
175 | };
176 | 
177 | module.exports = getLoaders;
178 | 
179 | 
180 | 


--------------------------------------------------------------------------------
/config/webpack/plugins.js:
--------------------------------------------------------------------------------
  1 | const { IgnorePlugin } = require('webpack');
  2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  3 | var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
  4 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  5 | const TerserPlugin = require('terser-webpack-plugin');
  6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  7 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  8 | const HtmlIncAssetsPlugin = require('html-webpack-include-assets-plugin');
  9 | const safePostCssParser = require('postcss-safe-parser');
 10 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 11 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const CopyPlugin = require('copy-webpack-plugin');
 14 | 
 15 | const paths = require('../paths');
 16 | const staticFiles = require('./static-files');
 17 | 
 18 | const minifyHtml = {
 19 |   removeComments: true,
 20 |   collapseWhitespace: true,
 21 |   removeRedundantAttributes: true,
 22 |   useShortDoctype: true,
 23 |   removeEmptyAttributes: true,
 24 |   removeStyleLinkTypeAttributes: true,
 25 |   keepClosingSlash: true,
 26 |   minifyJS: true,
 27 |   minifyCSS: true,
 28 |   minifyURLs: true,
 29 | };
 30 | 
 31 | 
 32 | const getPlugins = (isEnvProduction = false, shouldUseSourceMap = false) => {
 33 |   /* HTML Plugins for options, sidebar, options */
 34 |   const optionsHtmlPlugin = new HtmlWebpackPlugin(
 35 |     Object.assign(
 36 |       {},
 37 |       {
 38 |         title: 'Options',
 39 |         chunks: ['options'],
 40 |         filename: 'options.html',
 41 |         template: paths.optionsTemplate,
 42 |       },
 43 |       isEnvProduction
 44 |         ? {
 45 |           minify: minifyHtml,
 46 |         }
 47 |         : undefined
 48 |     )
 49 |   );
 50 | 
 51 |   const popupHtmlPlugin = new HtmlWebpackPlugin(
 52 |     Object.assign(
 53 |       {},
 54 |       {
 55 |         title: 'Popup',
 56 |         chunks: ['popup'],
 57 |         filename: 'popup.html',
 58 |         template: paths.popupTemplate,
 59 |       },
 60 |       isEnvProduction
 61 |         ? {
 62 |           minify: minifyHtml,
 63 |         }
 64 |         : undefined
 65 |     )
 66 |   );
 67 | 
 68 |   const sidebarHtmlPlugin = new HtmlWebpackPlugin(
 69 |     Object.assign(
 70 |       {},
 71 |       {
 72 |         title: 'Sidebar',
 73 |         chunks: ['sidebar'],
 74 |         filename: 'sidebar.html',
 75 |         template: paths.sidebarTemplate,
 76 |       },
 77 |       isEnvProduction
 78 |         ? {
 79 |           minify: minifyHtml,
 80 |         }
 81 |         : undefined
 82 |     )
 83 |   );
 84 | 
 85 |   const moduleNotFoundPlugin = new ModuleNotFoundPlugin(paths.appPath);
 86 |   const caseSensitivePathsPlugin = new CaseSensitivePathsPlugin();
 87 |   const watchMissingNodeModulesPlugin = new WatchMissingNodeModulesPlugin(paths.appNodeModules);
 88 |   const miniCssExtractPlugin = new MiniCssExtractPlugin({
 89 |     filename: '[name].css',
 90 |     // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
 91 |   });
 92 |   const ignorePlugin = new IgnorePlugin(/^\.\/locale$/, /moment$/);
 93 |   const terserPlugin = new TerserPlugin({
 94 |     terserOptions: {
 95 |       parse: {
 96 |         ecma: 8,
 97 |       },
 98 |       compress: {
 99 |         ecma: 5,
100 |         warnings: false,
101 |         comparisons: false,
102 |         inline: 2,
103 |       },
104 |       mangle: {
105 |         safari10: true,
106 |       },
107 |       output: {
108 |         ecma: 5,
109 |         comments: false,
110 |         ascii_only: true,
111 |       },
112 |     },
113 |     parallel: true,
114 |     cache: true,
115 |     sourceMap: shouldUseSourceMap,
116 |   });
117 |   const optimizeCSSAssetsPlugin = new OptimizeCSSAssetsPlugin({
118 |     cssProcessorOptions: {
119 |       parser: safePostCssParser,
120 |       map: shouldUseSourceMap
121 |         ? {
122 |           inline: false,
123 |           annotation: true,
124 |         }
125 |         : false,
126 |     },
127 |   });
128 |   /* Include these static JS and CSS assets in the generated HTML files */
129 |   const htmlIncAssetsPlugin = new HtmlIncAssetsPlugin({
130 |     append: false,
131 |     assets: staticFiles.htmlAssets,
132 |   });
133 | 
134 |   const moduleScopePlugin = new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]);
135 |   const copyPlugin = new CopyPlugin(staticFiles.copyPatterns);
136 |   const friendlyErrorsWebpackPlugin = new FriendlyErrorsWebpackPlugin();
137 | 
138 |   return {
139 |     optionsHtmlPlugin,
140 |     popupHtmlPlugin,
141 |     sidebarHtmlPlugin,
142 |     moduleNotFoundPlugin,
143 |     caseSensitivePathsPlugin,
144 |     watchMissingNodeModulesPlugin,
145 |     miniCssExtractPlugin,
146 |     ignorePlugin,
147 |     terserPlugin,
148 |     optimizeCSSAssetsPlugin,
149 |     moduleScopePlugin,
150 |     copyPlugin,
151 |     htmlIncAssetsPlugin,
152 |     friendlyErrorsWebpackPlugin
153 |   };
154 | };
155 | 
156 | module.exports = getPlugins;
157 | 
158 | 
159 | 


--------------------------------------------------------------------------------
/config/webpack/static-files.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function transformManifestVersion(content) {
 3 |   const manifest = JSON.parse(content.toString());
 4 |   manifest.version = process.env.npm_package_version;
 5 |   return Buffer.from(JSON.stringify(manifest));
 6 | }
 7 | 
 8 | /* Copied as it is to the `to` destination via CopyWebpackPlugin */
 9 | const copyPatterns = [
10 |   {
11 |     from: 'src/manifest.json',
12 |     to: '.',
13 |     transform: transformManifestVersion,
14 |   },
15 |   { from: 'src/img', to: 'img' },
16 |   {
17 |     from: 'src/lib',
18 |     to: 'lib/',
19 |   },
20 |   {
21 |     from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js',
22 |     to: 'lib/js/',
23 |   },
24 |   {
25 |     from: 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js',
26 |     to: 'lib/js/',
27 |   },
28 |   {
29 |     'from': 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
30 |     'to': 'lib/js/'
31 |   },
32 |   {
33 |     from: 'src/fonts/*/*',
34 |     to: 'fonts/googlefonts/[name].[ext]',
35 |   },
36 |   /* {
37 |     from:
38 |       'node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2,css}',
39 |     to: 'fonts/material-icons/[name].[ext]',
40 |     toType: 'template',
41 |   }, */
42 | ];
43 | 
44 | /* These are included into the HTML pages generated by HTMLWebpackPlugin*/
45 | const htmlAssets = [
46 |   'fonts/googlefonts/roboto-mono.css',
47 |   'lib/js/browser-polyfill.js',
48 |   'lib/js/webcomponents-bundle.js',
49 |   'lib/js/custom-elements-es5-adapter.js',
50 | ];
51 | 
52 | module.exports = {
53 |   copyPatterns,
54 |   htmlAssets
55 | };


--------------------------------------------------------------------------------
/config/webpack/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs');
  2 | const path = require('path');
  3 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  4 | 
  5 | const paths = require('../paths');
  6 | const initLoaders = require('./loaders');
  7 | const initPlugins = require('./plugins');
  8 | require('../env');
  9 | 
 10 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 11 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 12 | 
 13 | const doesOptionsExist = fs.existsSync(paths.appOptionsJs);
 14 | const doesOptionsHtmlExist = fs.existsSync(paths.optionsTemplate);
 15 | const doesPopupExist = fs.existsSync(paths.appPopupJs);
 16 | const doesPopupHtmlExist = fs.existsSync(paths.popupTemplate);
 17 | const doesSidebarExist = fs.existsSync(paths.appSidebarJs);
 18 | const doesSidebarHtmlExist = fs.existsSync(paths.sidebarTemplate);
 19 | const doesBackgroundExist = fs.existsSync(paths.appBackgroundJs);
 20 | const doesContentExist = fs.existsSync(paths.appContentJs);
 21 | 
 22 | 
 23 | 
 24 | module.exports = function (webpackEnv) {
 25 |   const isEnvDevelopment = webpackEnv === 'development';
 26 |   const isEnvProduction = webpackEnv === 'production';
 27 | 
 28 |   const publicPath = isEnvProduction
 29 |     ? paths.servedPath
 30 |     : isEnvDevelopment && '/';
 31 |   const shouldUseRelativeAssetPaths = publicPath === './';
 32 | 
 33 |   const loaders = initLoaders(isEnvProduction, isEnvDevelopment, shouldUseRelativeAssetPaths, shouldUseSourceMap);
 34 |   const plugins = initPlugins(isEnvProduction, shouldUseSourceMap);
 35 | 
 36 |   // named entry cannot be stored in an array and has to be stored inside an object
 37 |   const entryArray = [
 38 |     doesBackgroundExist && { 'background': paths.appBackgroundJs },
 39 |     doesPopupExist && { 'popup': paths.appPopupJs },
 40 |     doesContentExist && { 'content': paths.appContentJs },
 41 |     doesSidebarExist && { 'sidebar': paths.appSidebarJs },
 42 |     doesOptionsExist && { 'options': paths.appOptionsJs },
 43 |   ].filter(Boolean);
 44 | 
 45 |   const entry = {};
 46 |   entryArray.forEach(obj => { Object.assign(entry, obj); });
 47 | 
 48 |   return {
 49 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
 50 |     bail: isEnvProduction, // stop compilation on the very first error itself
 51 |     devtool: isEnvProduction
 52 |       ? shouldUseSourceMap ? 'source-map' : false
 53 |       : isEnvDevelopment && 'cheap-module-source-map',
 54 |     entry,
 55 |     output: {
 56 |       path: isEnvProduction ? paths.appExtension : paths.appDev,
 57 |       // pathinfo: isEnvDevelopment,
 58 |       filename: '[name].js',
 59 |       devtoolModuleFilenameTemplate: isEnvProduction
 60 |         ? info => path
 61 |           .relative(paths.appSrc, info.absoluteResourcePath)
 62 |           .replace(/\\/g, '/')
 63 |         : isEnvDevelopment &&
 64 |         (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
 65 |     },
 66 |     optimization: {
 67 |       minimize: isEnvProduction,
 68 |       minimizer: [
 69 |         plugins.terserPlugin,
 70 |         plugins.optimizeCSSAssetsPlugin,
 71 |       ]
 72 |     },
 73 |     resolve: {
 74 |       modules: ['node_modules'].concat(
 75 |         process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 76 |       ),
 77 |       extensions: paths.moduleFileExtensions
 78 |         .map(ext => `.${ext}`)
 79 |         .filter(ext => useTypeScript || !ext.includes('ts')),
 80 |       plugins: [
 81 |         PnpWebpackPlugin,
 82 |         plugins.moduleScopePlugin,
 83 |       ],
 84 |     },
 85 |     resolveLoader: {
 86 |       plugins: [
 87 |         PnpWebpackPlugin.moduleLoader(module),
 88 |       ],
 89 |     },
 90 |     module: {
 91 |       strictExportPresence: true,
 92 |       rules: [
 93 |         { parser: { requireEnsure: false } },
 94 |         loaders.eslintLoader,
 95 |         {
 96 |           // "oneOf" will traverse all following loaders until one will match the requirements. 
 97 |           // When no loader matches it will fall back to the "file" loader at the end of the loader list.
 98 |           oneOf: [
 99 |             loaders.urlLoader,
100 |             loaders.insideBabelLoader,
101 |             loaders.outsideBabelLoader,
102 |             loaders.styleLoader,
103 |             loaders.cssModuleLoader,
104 |             loaders.fileLoader
105 |             // ** STOP ** Are you adding a new loader?
106 |             // Make sure to add the new loader(s) before the "file" loader.
107 |           ],
108 |         },
109 |       ],
110 |     },
111 |     plugins: [
112 |       plugins.friendlyErrorsWebpackPlugin,
113 |       doesOptionsHtmlExist && plugins.optionsHtmlPlugin,
114 |       doesPopupHtmlExist && plugins.popupHtmlPlugin,
115 |       doesSidebarHtmlExist && plugins.sidebarHtmlPlugin,
116 |       plugins.htmlIncAssetsPlugin,
117 |       plugins.moduleNotFoundPlugin,
118 |       isEnvDevelopment && plugins.CaseSensitivePathsPlugin,
119 |       isEnvDevelopment && plugins.watchMissingNodeModulesPlugin,
120 |       isEnvProduction && plugins.miniCssExtractPlugin,
121 |       plugins.ignorePlugin,
122 |       plugins.copyPlugin,
123 |     ].filter(Boolean),
124 |     node: {
125 |       dgram: 'empty',
126 |       fs: 'empty',
127 |       net: 'empty',
128 |       tls: 'empty',
129 |       child_process: 'empty',
130 |     },
131 |     performance: false,
132 |   };
133 | };
134 | 


--------------------------------------------------------------------------------
/config/webpack/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | /* Minimal webpack-dev-server config */
 2 | 
 3 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
 4 | const paths = require('../paths');
 5 | 
 6 | const host = process.env.HOST || '0.0.0.0';
 7 | 
 8 | module.exports = function () {
 9 |   return {
10 |     compress: true,
11 |     clientLogLevel: 'none',
12 |     contentBase: paths.appPublic,
13 |     watchContentBase: true,
14 |     hot: true,
15 |     publicPath: '/',
16 |     quiet: true,
17 |     watchOptions: {
18 |       ignored: ignoredFiles(paths.appSrc),
19 |     },
20 |     host
21 |   };
22 | };
23 | 


--------------------------------------------------------------------------------
/development.md:
--------------------------------------------------------------------------------
 1 | ## Installation
 2 | 
 3 | *Before you begin installing this project you need [**NodeJS**](https://nodejs.org/en/) and [**npm**](https://www.npmjs.com/get-npm) installed on your machine. Make sure to install the latest version of node.*
 4 | 
 5 | ```bash
 6 | # clone the git repo
 7 | $ git clone https://gitlab.com/cbackas/posterizer-extension.git
 8 | 
 9 | # Install dependencies
10 | $ npm install
11 | ```
12 | 
13 | ## Development
14 | 
15 | * Run script
16 | ```bash
17 | # build files to './dev' 
18 | # and launches the web ext in a new chrome instance, watches for changes and updates
19 | $ npm run start:chrome
20 | # launches in firefox
21 | $ npm run start:firefox
22 | # runs storybook
23 | $ npm run storybook
24 | ```
25 | 
26 | * If you want to load your unpacked extension by yourself, then run `npm run dev`. This will create the extension inside an **dev** folder in `development` mode and will watch the `src` folder for changes.   
27 | * [Load unpacked extensions](https://developer.chrome.com/extensions/getstarted#unpacked) with `./dev` folder. Though you have to reload the extension by yourself every time the `./dev` folder updates.
28 |   
29 | These assets are copied as it is to the build folder, just like the `/src/lib` folder.
30 | 
31 | 
32 | ## Build
33 | 
34 | ```bash
35 | # build files to './extension'
36 | $ npm run build
37 | ```
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "posterizer",
  3 |   "version": "1.3.1",
  4 |   "description": "Posterdb to Plex image POSTing",
  5 |   "scripts": {
  6 |     "test": "echo \"Error: no test specified\" && exit 1",
  7 |     "start:chrome": "npm run chrome-launch",
  8 |     "start:firefox": "npm run firefox-launch",
  9 |     "start:views": "node scripts/start.js",
 10 |     "dev": "node scripts/dev.js",
 11 |     "build": "node scripts/build.js",
 12 |     "compress": "node scripts/compress",
 13 |     "compress-keygen": "crx keygen",
 14 |     "clean": "rimraf build/ dev/ dist/ extension/ *.zip *.crx",
 15 |     "lint": "eslint ./ ",
 16 |     "lint:fix": "eslint ./ --fix",
 17 |     "chrome-launch": "node scripts/dev.js --browser=chrome",
 18 |     "firefox-launch": "node scripts/dev.js --browser=firefox"
 19 |   },
 20 |   "keywords": [
 21 |     "chrome",
 22 |     "extension",
 23 |     "react",
 24 |     "redux",
 25 |     "hot reload",
 26 |     "webpack",
 27 |     "boilerplate"
 28 |   ],
 29 |   "repository": {
 30 |     "type": "git",
 31 |     "url": "https://github.com/cbackas/Posterizer-Extension.git"
 32 |   },
 33 |   "author": "Zac Gibson",
 34 |   "license": "MIT",
 35 |   "bugs": {
 36 |     "url": "https://github.com/cbackas/Posterizer-Extension/issues"
 37 |   },
 38 |   "dependencies": {
 39 |     "@babel/core": "^7.12.10",
 40 |     "@babel/preset-env": "^7.12.11",
 41 |     "@babel/preset-react": "^7.12.10",
 42 |     "@polymer/paper-button": "^3.0.1",
 43 |     "@risingstack/react-easy-state": "^6.3.0",
 44 |     "@svgr/webpack": "2.4.1",
 45 |     "@webcomponents/webcomponentsjs": "^2.5.0",
 46 |     "babel-core": "7.0.0-bridge.0",
 47 |     "babel-eslint": "^10.1.0",
 48 |     "babel-jest": "23.6.0",
 49 |     "babel-loader": "^8.2.2",
 50 |     "babel-plugin-named-asset-import": "^0.3.7",
 51 |     "babel-preset-react-app": "^7.0.2",
 52 |     "bfj": "6.1.1",
 53 |     "case-sensitive-paths-webpack-plugin": "2.1.2",
 54 |     "chalk": "2.4.1",
 55 |     "cheerio": "^1.0.0-rc.5",
 56 |     "chrome-launch": "^1.1.4",
 57 |     "colors": "^1.4.0",
 58 |     "copy-webpack-plugin": "^4.6.0",
 59 |     "crx": "^3.2.1",
 60 |     "css-loader": "^1.0.1",
 61 |     "dotenv": "6.0.0",
 62 |     "dotenv-expand": "4.2.0",
 63 |     "eslint": "^5.12.0",
 64 |     "eslint-config-react-app": "^3.0.8",
 65 |     "eslint-loader": "2.1.1",
 66 |     "eslint-plugin-flowtype": "2.50.1",
 67 |     "eslint-plugin-import": "2.14.0",
 68 |     "eslint-plugin-jsx-a11y": "6.1.2",
 69 |     "eslint-plugin-react": "^7.22.0",
 70 |     "execa": "^1.0.0",
 71 |     "file-loader": "2.0.0",
 72 |     "friendly-errors-webpack-plugin": "^1.7.0",
 73 |     "fs-extra": "7.0.0",
 74 |     "html-loader": "^0.5.5",
 75 |     "html-webpack-include-assets-plugin": "^1.0.10",
 76 |     "html-webpack-plugin": "4.0.0-alpha.2",
 77 |     "identity-obj-proxy": "3.0.0",
 78 |     "jest": "23.6.0",
 79 |     "jest-pnp-resolver": "1.0.1",
 80 |     "jest-resolve": "23.6.0",
 81 |     "lodash": "^4.17.20",
 82 |     "mini-css-extract-plugin": "0.4.3",
 83 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 84 |     "ora": "^3.4.0",
 85 |     "plex-api": "^5.3.1",
 86 |     "plex-api-credentials": "^3.0.1",
 87 |     "pnp-webpack-plugin": "1.1.0",
 88 |     "postcss-flexbugs-fixes": "4.1.0",
 89 |     "postcss-loader": "3.0.0",
 90 |     "postcss-preset-env": "6.3.1",
 91 |     "postcss-safe-parser": "4.0.1",
 92 |     "prop-types": "^15.7.2",
 93 |     "react": "^16.14.0",
 94 |     "react-app-polyfill": "^0.2.2",
 95 |     "react-dev-utils": "^7.0.5",
 96 |     "react-dom": "^16.14.0",
 97 |     "react-input-mask": "^2.0.4",
 98 |     "resolve": "1.8.1",
 99 |     "sass-loader": "7.1.0",
100 |     "semantic-ui-css": "^2.4.1",
101 |     "semantic-ui-react": "^0.88.2",
102 |     "style-loader": "^0.23.1",
103 |     "terser-webpack-plugin": "1.1.0",
104 |     "url-loader": "1.1.1",
105 |     "web-ext": "^2.9.3",
106 |     "webextension-polyfill": "^0.3.1",
107 |     "webpack": "4.19.1",
108 |     "webpack-cli": "^3.3.12",
109 |     "webpack-dev-server": "3.1.14",
110 |     "webpack-manifest-plugin": "2.0.4",
111 |     "xml2js": "^0.4.23",
112 |     "yargs": "^12.0.5"
113 |   },
114 |   "browserslist": [
115 |     ">0.2%",
116 |     "not dead",
117 |     "not ie <= 11",
118 |     "not op_mini all"
119 |   ]
120 | }
121 | 


--------------------------------------------------------------------------------
/screenshots/apply.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbackas/Posterizer-Extension/fb2d3862f97f4f16115adf58b40be1b55aa58e5f/screenshots/apply.png


--------------------------------------------------------------------------------
/screenshots/recording.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbackas/Posterizer-Extension/fb2d3862f97f4f16115adf58b40be1b55aa58e5f/screenshots/recording.gif


--------------------------------------------------------------------------------
/screenshots/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbackas/Posterizer-Extension/fb2d3862f97f4f16115adf58b40be1b55aa58e5f/screenshots/search.png


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const bfj = require('bfj');
 23 | const configFactory = require('../config/webpack/webpack.config');
 24 | const paths = require('../config/paths');
 25 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 26 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 27 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 28 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 29 | const printBuildError = require('react-dev-utils/printBuildError');
 30 | 
 31 | const measureFileSizesBeforeBuild =
 32 |   FileSizeReporter.measureFileSizesBeforeBuild;
 33 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | 
 36 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 37 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 38 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 39 | 
 40 | const isInteractive = process.stdout.isTTY;
 41 | 
 42 | // Warn and crash if required files are missing
 43 | if (!checkRequiredFiles([paths.appHtml])) {
 44 |   process.exit(1);
 45 | }
 46 | 
 47 | // Process CLI arguments
 48 | const argv = process.argv.slice(2);
 49 | const writeStatsJson = argv.indexOf('--stats') !== -1;
 50 | 
 51 | // Generate configuration
 52 | const config = configFactory('production');
 53 | 
 54 | // We require that you explicitly set browsers and do not fall back to
 55 | // browserslist defaults.
 56 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 57 | checkBrowsers(paths.appPath, isInteractive)
 58 |   .then(() => {
 59 |     // First, read the current file sizes in Extension directory.
 60 |     // This lets us display how much they changed later.
 61 |     return measureFileSizesBeforeBuild(paths.appExtension);
 62 |   })
 63 |   .then(previousFileSizes => {
 64 |     // Remove all content but keep the directory so that
 65 |     // if you're in it, you don't end up in Trash
 66 |     fs.emptyDirSync(paths.appExtension);
 67 |     // Merge with the public folder
 68 |     // copyPublicFolder();
 69 |     // Start the webpack build
 70 |     return build(previousFileSizes);
 71 |   })
 72 |   .then(
 73 |     ({ stats, previousFileSizes, warnings }) => {
 74 |       if (warnings.length) {
 75 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 76 |         console.log(warnings.join('\n\n'));
 77 |         console.log(
 78 |           '\nSearch for the ' +
 79 |           chalk.underline(chalk.yellow('keywords')) +
 80 |           ' to learn more about each warning.'
 81 |         );
 82 |         console.log(
 83 |           'To ignore, add ' +
 84 |           chalk.cyan('// eslint-disable-next-line') +
 85 |           ' to the line before.\n'
 86 |         );
 87 |       } else {
 88 |         console.log(chalk.green('Compiled successfully.\n'));
 89 |       }
 90 | 
 91 |       console.log('File sizes after gzip:\n');
 92 |       printFileSizesAfterBuild(
 93 |         stats,
 94 |         previousFileSizes,
 95 |         paths.appExtension,
 96 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 97 |         WARN_AFTER_CHUNK_GZIP_SIZE
 98 |       );
 99 |       console.log();
100 | 
101 |       const appPackage = require(paths.appPackageJson);
102 |       const publicUrl = paths.publicUrl;
103 |       const publicPath = config.output.publicPath;
104 |       const buildFolder = path.relative(process.cwd(), paths.appExtension);
105 |       printHostingInstructions(
106 |         appPackage,
107 |         publicUrl,
108 |         publicPath,
109 |         buildFolder,
110 |         useYarn
111 |       );
112 |     },
113 |     err => {
114 |       console.log(chalk.red('Failed to compile.\n'));
115 |       printBuildError(err);
116 |       process.exit(1);
117 |     }
118 |   )
119 |   .catch(err => {
120 |     if (err && err.message) {
121 |       console.log(err.message);
122 |     }
123 |     process.exit(1);
124 |   });
125 | 
126 | // Create the production build and print the deployment instructions.
127 | function build(previousFileSizes) {
128 |   console.log('Creating an optimized production build...');
129 | 
130 |   let compiler = webpack(config);
131 |   return new Promise((resolve, reject) => {
132 |     compiler.run((err, stats) => {
133 |       let messages;
134 |       if (err) {
135 |         if (!err.message) {
136 |           return reject(err);
137 |         }
138 |         messages = formatWebpackMessages({
139 |           errors: [err.message],
140 |           warnings: [],
141 |         });
142 |       } else {
143 |         messages = formatWebpackMessages(
144 |           stats.toJson({ all: false, warnings: true, errors: true })
145 |         );
146 |       }
147 |       if (messages.errors.length) {
148 |         // Only keep the first error. Others are often indicative
149 |         // of the same problem, but confuse the reader with noise.
150 |         if (messages.errors.length > 1) {
151 |           messages.errors.length = 1;
152 |         }
153 |         return reject(new Error(messages.errors.join('\n\n')));
154 |       }
155 |       if (
156 |         process.env.CI &&
157 |         (typeof process.env.CI !== 'string' ||
158 |           process.env.CI.toLowerCase() !== 'false') &&
159 |         messages.warnings.length
160 |       ) {
161 |         console.log(
162 |           chalk.yellow(
163 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
164 |             'Most CI servers set it automatically.\n'
165 |           )
166 |         );
167 |         return reject(new Error(messages.warnings.join('\n\n')));
168 |       }
169 | 
170 |       const resolveArgs = {
171 |         stats,
172 |         previousFileSizes,
173 |         warnings: messages.warnings,
174 |       };
175 |       if (writeStatsJson) {
176 |         return bfj
177 |           .write(paths.appExtension + '/bundle-stats.json', stats.toJson())
178 |           .then(() => resolve(resolveArgs))
179 |           .catch(error => reject(new Error(error)));
180 |       }
181 | 
182 |       return resolve(resolveArgs);
183 |     });
184 |   });
185 | }
186 | /*
187 | function copyPublicFolder() {
188 |   fs.copySync(paths.appPublic, paths.appBuild, {
189 |     dereference: true,
190 |     filter: file => file !== paths.appHtml,
191 |   });
192 | }
193 | */
194 | 


--------------------------------------------------------------------------------
/scripts/chrome-launch.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | const path = require('path');
 4 | const chromeLaunch = require('chrome-launch'); // eslint-disable-line import/no-extraneous-dependencies
 5 | 
 6 | require('colors');
 7 | 
 8 | const url = 'https://google.com';
 9 | const dev = path.resolve(__dirname, '..', 'dev');
10 | const args = [`--load-extension=${dev}`];
11 | 
12 | chromeLaunch(url, { args });


--------------------------------------------------------------------------------
/scripts/compress.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const ChromeExtension = require('crx');
 3 | /* eslint import/no-unresolved: 0 */
 4 | const argv = require('minimist')(process.argv.slice(2));
 5 | const name = require('../src/manifest.json').name;
 6 | 
 7 | 
 8 | const keyPath = argv.key || 'key.pem';
 9 | const existsKey = fs.existsSync(keyPath);
10 | const crx = new ChromeExtension({
11 |   appId: argv['app-id'],
12 |   codebase: argv.codebase,
13 |   privateKey: existsKey ? fs.readFileSync(keyPath) : null
14 | });
15 | 
16 | crx.load('extension')
17 |   .then(() => crx.loadContents())
18 |   .then((archiveBuffer) => {
19 |     fs.writeFile(`${name}.zip`, archiveBuffer);
20 | 
21 |     if (!argv.codebase || !existsKey) return;
22 |     crx.pack(archiveBuffer).then((crxBuffer) => {
23 |       const updateXML = crx.generateUpdateXML();
24 | 
25 |       fs.writeFile('update.xml', updateXML);
26 |       fs.writeFile(`${name}.crx`, crxBuffer);
27 |     });
28 |   });


--------------------------------------------------------------------------------
/scripts/dev.js:
--------------------------------------------------------------------------------
  1 | /* Minimal start.js file */
  2 | 
  3 | process.env.BABEL_ENV = 'development';
  4 | process.env.NODE_ENV = 'development';
  5 | 
  6 | const Ora = require('ora');
  7 | const execa = require('execa');
  8 | const chalk = require('chalk');
  9 | const webpack = require('webpack');
 10 | const argv = require('yargs').argv;
 11 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 12 | const printBuildError = require('react-dev-utils/printBuildError');
 13 | 
 14 | require('colors');
 15 | 
 16 | let browserRunning = false;
 17 | 
 18 | const webpackConfigFactory = require('../config/webpack/webpack.config');
 19 | 
 20 | console.log('\n-----------------------------------------------------\n'.yellow.bold);
 21 | 
 22 | // generate webpack config from webpack config factory
 23 | const webpackConfig = webpackConfigFactory('development');
 24 | 
 25 | let spinner = new Ora({
 26 |   text: 'Bundling files and asstes using Webpack'.blue,
 27 |   stream: process.stdout
 28 | });
 29 | spinner.start();
 30 | 
 31 | const compiler = webpack(webpackConfig);
 32 | /* try { */
 33 | compiler.watch({}, (err, stats) => {
 34 |   spinner.succeed();
 35 |   let messages;
 36 |   if (err) {
 37 |     if (!err.message) {
 38 |       throw new Error(err);
 39 |     }
 40 |     messages = formatWebpackMessages({
 41 |       errors: [err.message],
 42 |       warnings: [],
 43 |     });
 44 |   }
 45 |   else {
 46 |     messages = formatWebpackMessages(
 47 |       stats.toJson({ all: false, warnings: true, errors: true })
 48 |     );
 49 |   }
 50 | 
 51 |   if (messages.errors.length) {
 52 |     // Only keep the first error. Others are often indicative
 53 |     // of the same problem, but confuse the reader with noise.
 54 |     if (messages.errors.length > 1) {
 55 |       messages.errors.length = 1;
 56 |     }
 57 |     console.log(chalk.red('Failed to compile.\n'));
 58 |     // process.exit(1);
 59 |   }
 60 |   if (
 61 |     process.env.CI &&
 62 |     (typeof process.env.CI !== 'string' ||
 63 |       process.env.CI.toLowerCase() !== 'false') &&
 64 |     messages.warnings.length
 65 |   ) {
 66 |     console.log(
 67 |       chalk.yellow(
 68 |         '\nTreating warnings as errors because process.env.CI = true.\n' +
 69 |         'Most CI servers set it automatically.\n'
 70 |       )
 71 |     );
 72 |     // throw new Error(messages.warnings.join('\n\n'));
 73 |     process.exit(1);
 74 |   }
 75 | 
 76 | 
 77 | 
 78 |   // choose browser to display
 79 |   if (argv.browser === 'chrome' && !browserRunning) {
 80 |     browserRunning = true;
 81 |     spinner = new Ora({
 82 |       text: 'Opening the extension in a new Chrome instance'.blue,
 83 |       stream: process.stdout
 84 |     });
 85 |     spinner.start();
 86 |     execa('node', ['scripts/chrome-launch.js']).stdout.pipe(process.stdout);
 87 |   }
 88 |   else if (argv.browser === 'firefox' && !browserRunning) {
 89 |     browserRunning = true;
 90 |     spinner = new Ora({
 91 |       text: 'Opening the extension in a new Firefox instance'.blue,
 92 |       stream: process.stdout
 93 |     });
 94 |     spinner.start();
 95 |     execa('web-ext', ['run', '--source-dir', 'dev', '--pref', 'startup.homepage_welcome_url=https://www.youtube.com']);
 96 |   }
 97 | 
 98 | });
 99 | /* } catch (err) {
100 |   console.log(chalk.red('Failed to compile.\n'));
101 |   console.log(err.message);
102 |   printBuildError(err);
103 |   process.exit(1);
104 | } */
105 | 
106 | 
107 | 
108 | 
109 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | /* Minimal start.js file */
 2 | 
 3 | process.env.BABEL_ENV = 'development';
 4 | process.env.NODE_ENV = 'development';
 5 | 
 6 | const chalk = require('chalk');
 7 | const webpack = require('webpack');
 8 | const WebpackDevServer = require('webpack-dev-server');
 9 | 
10 | const webpackConfigFactory = require('../config/webpack/webpack.config');
11 | const createDevServerConfig = require('../config/webpack/webpackDevServer.config');
12 | 
13 | 
14 | const webpackConfig = webpackConfigFactory('development');
15 | 
16 | const compiler = webpack(webpackConfig);
17 | const serverConfig = createDevServerConfig();
18 | const devServer = new WebpackDevServer(compiler, serverConfig);
19 | devServer.listen(3000, 'localhost', (err) => {
20 |   if (err) {
21 |     return console.log(err);
22 |   }
23 |   console.log(chalk.cyan('Starting the development server...\n'));
24 |   console.log(chalk.cyan('Open in localhost:3000'));
25 | });


--------------------------------------------------------------------------------
/src/background/index.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-unused-vars */
  2 | /* eslint-disable no-undef */
  3 | 
  4 | // listen for calls to perform various actions that need to execute even if the popup closes
  5 | browser.runtime.onMessage.addListener(message => {
  6 |   if (message.request === 'post_matchups') {
  7 |     postFinalURLs(message.matchups);
  8 |   } else if (message.request === 'fetch_token') {
  9 |     fetchToken(function(error, access_token) {
 10 |       if (error) console.log(error);
 11 |     });
 12 |   } else if (message.request === 'clear_token') {
 13 |     removeCachedToken();
 14 |   } else if (message.request === 'clear_cache') {
 15 |     removeCache();
 16 |   }
 17 | });
 18 | 
 19 | // given a formatted matchups object, POSTS all the urls to the Plex API endpoint configured in settings
 20 | const postFinalURLs = matchups => {
 21 |   // make sure we have plex authentication and an API server to call then perform the POSTs
 22 |   const storageItem = browser.storage.local.get([
 23 |     'token',
 24 |     'selected_server_uri'
 25 |   ]);
 26 |   storageItem.then(res => {
 27 |     const { token, selected_server_uri } = res;
 28 | 
 29 |     if (token && selected_server_uri) sendPOSTs(token, selected_server_uri);
 30 |   });
 31 | 
 32 |   // go through matchups and POST them to plex server API
 33 |   const sendPOSTs = (token, selected_server_uri) => {
 34 |     Object.keys(matchups).forEach(key => {
 35 |       const matchup = matchups[key];
 36 |       const request_url = `${selected_server_uri}/library/metadata/${
 37 |         matchup[0]
 38 |       }/posters?includeExternalMedia=1
 39 |       &url=${matchup[1]}&X-Plex-Token=${token}`;
 40 | 
 41 |       setTimeout(() => {
 42 |         console.log(`[POST] ${request_url}`);
 43 | 
 44 |         fetch(request_url, {
 45 |           method: 'POST',
 46 |           redirect: 'follow'
 47 |         })
 48 |           .then(response => response.text())
 49 |           .then(result => console.log(result))
 50 |           .catch(error => {
 51 |             console.log('error', error);
 52 |           });
 53 |       }, 250);
 54 |     });
 55 |   };
 56 | };
 57 | 
 58 | // plex oAuth flow
 59 | const fetchToken = callback => {
 60 |   const product = 'Posterizer';
 61 |   const platform = 'Web';
 62 |   const device = `${product} (${platform})`;
 63 |   const clientId = '11442b0924c8d6a98fb7';
 64 |   const redirectUri = browser.identity.getRedirectURL('provider_cb');
 65 | 
 66 |   var access_token = null;
 67 | 
 68 |   // in case we already have an access_token cached
 69 |   const storageItem = browser.storage.local.get('token');
 70 |   storageItem.then(res => {
 71 |     access_token = res.token;
 72 |     if (access_token) {
 73 |       callback(null, access_token);
 74 |       return;
 75 |     } else {
 76 |       initFlow();
 77 |     }
 78 |   });
 79 | 
 80 |   // things that come from fetches
 81 |   var id = null;
 82 |   var code = null;
 83 | 
 84 |   // start oAuth flow by requesting a pin from the plex oAuth endpoint and then redirecting to a login page
 85 |   initFlow = () => {
 86 |     var myHeaders = new Headers();
 87 |     myHeaders.append('X-Plex-Product', product);
 88 |     myHeaders.append('X-Plex-Platform', platform);
 89 |     myHeaders.append('X-Plex-Device', device);
 90 |     myHeaders.append('X-Plex-Client-Identifier', clientId);
 91 | 
 92 |     var requestOptions = {
 93 |       method: 'POST',
 94 |       headers: myHeaders,
 95 |       redirect: 'follow'
 96 |     };
 97 | 
 98 |     fetch('https://plex.tv/api/v2/pins.json?strong=true', requestOptions)
 99 |       .then(response => response.json())
100 |       .then(result => {
101 |         id = result.id;
102 |         code = result.code;
103 |         redirectToLogin();
104 |       })
105 |       .catch(error => callback(error, null));
106 |   };
107 | 
108 |   // opens new browser popup to allow user to log into plex
109 |   redirectToLogin = () => {
110 |     var login_url =
111 |       'https://app.plex.tv/auth#' +
112 |       `?context[device][product]=${product}` +
113 |       '&context[device][environment]=bundled' +
114 |       '&context[device][layout]=desktop' +
115 |       `&context[device][platform]=${platform}` +
116 |       `&context[device][device]=${encodeURI(device)}` +
117 |       `&clientID=${clientId}` +
118 |       // `&forwardUrl=${redirectUri}` +
119 |       `&code=${code}`;
120 | 
121 |     browser.windows
122 |       .create({
123 |         url: login_url,
124 |         type: 'popup',
125 |         height: 700,
126 |         width: 460
127 |       })
128 |       .then(popup => {
129 |         const popup_window_id = popup.id;
130 | 
131 |         browser.windows.onRemoved.addListener(windowId => {
132 |           if (windowId === popup_window_id) {
133 |             codeToToken();
134 |           }
135 |         });
136 |       });
137 |   };
138 | 
139 |   // runs a GET request to turn the clientID and code given by plex login page into a token
140 |   codeToToken = () => {
141 |     var myHeaders = new Headers();
142 |     myHeaders.append('X-Plex-Client-Identifier', clientId);
143 | 
144 |     var requestOptions = {
145 |       method: 'GET',
146 |       headers: myHeaders,
147 |       redirect: 'follow'
148 |     };
149 | 
150 |     fetch(`https://plex.tv/api/v2/pins/${id}.json`, requestOptions)
151 |       .then(response => response.json())
152 |       .then(result => saveAccessToken(result.authToken))
153 |       .catch(error => callback(error, null));
154 |   };
155 | 
156 |   // save plex authentication token to storage so we can use it whenever we need it
157 |   saveAccessToken = token => {
158 |     access_token = token;
159 |     console.log('Setting access_token: ', access_token);
160 |     browser.storage.local.set({ token: access_token });
161 |     callback(null, access_token);
162 |   };
163 | };
164 | 
165 | // clear token from browser storage
166 | const removeCachedToken = () => {
167 |   access_token = null;
168 |   browser.storage.local.set({ token: null });
169 | };
170 | 
171 | // clear settings for plex from browser storage
172 | const removeCache = () => {
173 |   browser.storage.local.set({
174 |     selected_server_uri: null,
175 |     selected_server_name: null,
176 |     selected_lib_id: null,
177 |     selected_lib_name: null
178 |   });
179 | };
180 | 


--------------------------------------------------------------------------------
/src/content_scripts/index.js:
--------------------------------------------------------------------------------
 1 | import * as browser from 'webextension-polyfill';
 2 | 
 3 | console.log('Content scripts has loaded');
 4 | 
 5 | // listens for a request to read source code - returns a promise with the loaded page's HTML
 6 | browser.runtime.onMessage.addListener(request => {
 7 |   var response = '';
 8 |   if (request.req === 'source-code') {
 9 |     response = document.documentElement.innerHTML;
10 |   }
11 |   return Promise.resolve({ content: response });
12 | });


--------------------------------------------------------------------------------
/src/fonts/googlefonts/noto-sans.css:
--------------------------------------------------------------------------------
  1 | /* vietnamese */
  2 | @font-face {
  3 |   font-family: 'Inconsolata';
  4 |   font-style: normal;
  5 |   font-weight: 400;
  6 |   src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(https://fonts.gstatic.com/s/inconsolata/v16/QldKNThLqRwH-OJ1UHjlKGlW5qhWxg.woff2) format('woff2');
  7 |   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  8 | }
  9 | /* latin-ext */
 10 | @font-face {
 11 |   font-family: 'Inconsolata';
 12 |   font-style: normal;
 13 |   font-weight: 400;
 14 |   src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(https://fonts.gstatic.com/s/inconsolata/v16/QldKNThLqRwH-OJ1UHjlKGlX5qhWxg.woff2) format('woff2');
 15 |   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 16 | }
 17 | /* latin */
 18 | @font-face {
 19 |   font-family: 'Inconsolata';
 20 |   font-style: normal;
 21 |   font-weight: 400;
 22 |   src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(https://fonts.gstatic.com/s/inconsolata/v16/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format('woff2');
 23 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 24 | }
 25 | /* cyrillic-ext */
 26 | @font-face {
 27 |   font-family: 'Noto Sans';
 28 |   font-style: italic;
 29 |   font-weight: 700;
 30 |   src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v7/o-0TIpQlx3QUlC5A4PNr4Az5ZuyOzW1aPQ.woff2) format('woff2');
 31 |   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 32 | }
 33 | /* cyrillic */
 34 | @font-face {
 35 |   font-family: 'Noto Sans';
 36 |   font-style: italic;
 37 |   font-weight: 700;
 38 |   src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v7/o-0TIpQlx3QUlC5A4PNr4Az5ZuyHzW1aPQ.woff2) format('woff2');
 39 |   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 40 | }
 41 | /* devanagari */
 42 | @font-face {
 43 |   font-family: 'Noto Sans';
 44 |   font-style: italic;
 45 |   font-weight: 700;
 46 |   src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v7/o-0TIpQlx3QUlC5A4PNr4Az5ZuyCzW1aPQ.woff2) format('woff2');
 47 |   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 48 | }
 49 | /* greek-ext */
 50 | @font-face {
 51 |   font-family: 'Noto Sans';
 52 |   font-style: italic;
 53 |   font-weight: 700;
 54 |   src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v7/o-0TIpQlx3QUlC5A4PNr4Az5ZuyPzW1aPQ.woff2) format('woff2');
 55 |   unicode-range: U+1F00-1FFF;
 56 | }
 57 | /* greek */
 58 | @font-face {
 59 |   font-family: 'Noto Sans';
 60 |   font-style: italic;
 61 |   font-weight: 700;
 62 |   src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v7/o-0TIpQlx3QUlC5A4PNr4Az5ZuyAzW1aPQ.woff2) format('woff2');
 63 |   unicode-range: U+0370-03FF;
 64 | }
 65 | /* vietnamese */
 66 | @font-face {
 67 |   font-family: 'Noto Sans';
 68 |   font-style: italic;
 69 |   font-weight: 700;
 70 |   src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v7/o-0TIpQlx3QUlC5A4PNr4Az5ZuyMzW1aPQ.woff2) format('woff2');
 71 |   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 72 | }
 73 | /* latin-ext */
 74 | @font-face {
 75 |   font-family: 'Noto Sans';
 76 |   font-style: italic;
 77 |   font-weight: 700;
 78 |   src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v7/o-0TIpQlx3QUlC5A4PNr4Az5ZuyNzW1aPQ.woff2) format('woff2');
 79 |   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 80 | }
 81 | /* latin */
 82 | @font-face {
 83 |   font-family: 'Noto Sans';
 84 |   font-style: italic;
 85 |   font-weight: 700;
 86 |   src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v7/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2');
 87 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 88 | }
 89 | /* cyrillic-ext */
 90 | @font-face {
 91 |   font-family: 'Noto Sans';
 92 |   font-style: normal;
 93 |   font-weight: 700;
 94 |   src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVadyB1Wk.woff2) format('woff2');
 95 |   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 96 | }
 97 | /* cyrillic */
 98 | @font-face {
 99 |   font-family: 'Noto Sans';
100 |   font-style: normal;
101 |   font-weight: 700;
102 |   src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVYNyB1Wk.woff2) format('woff2');
103 |   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
104 | }
105 | /* devanagari */
106 | @font-face {
107 |   font-family: 'Noto Sans';
108 |   font-style: normal;
109 |   font-weight: 700;
110 |   src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVZdyB1Wk.woff2) format('woff2');
111 |   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
112 | }
113 | /* greek-ext */
114 | @font-face {
115 |   font-family: 'Noto Sans';
116 |   font-style: normal;
117 |   font-weight: 700;
118 |   src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVaNyB1Wk.woff2) format('woff2');
119 |   unicode-range: U+1F00-1FFF;
120 | }
121 | /* greek */
122 | @font-face {
123 |   font-family: 'Noto Sans';
124 |   font-style: normal;
125 |   font-weight: 700;
126 |   src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVZ9yB1Wk.woff2) format('woff2');
127 |   unicode-range: U+0370-03FF;
128 | }
129 | /* vietnamese */
130 | @font-face {
131 |   font-family: 'Noto Sans';
132 |   font-style: normal;
133 |   font-weight: 700;
134 |   src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVa9yB1Wk.woff2) format('woff2');
135 |   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
136 | }
137 | /* latin-ext */
138 | @font-face {
139 |   font-family: 'Noto Sans';
140 |   font-style: normal;
141 |   font-weight: 700;
142 |   src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVatyB1Wk.woff2) format('woff2');
143 |   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
144 | }
145 | /* latin */
146 | @font-face {
147 |   font-family: 'Noto Sans';
148 |   font-style: normal;
149 |   font-weight: 700;
150 |   src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2');
151 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
152 | }


--------------------------------------------------------------------------------
/src/fonts/googlefonts/roboto-mono.css:
--------------------------------------------------------------------------------
 1 | /* cyrillic-ext */
 2 | @font-face {
 3 |   font-family: 'Roboto Mono';
 4 |   font-style: normal;
 5 |   font-weight: 400;
 6 |   src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhGq3-OXg.woff2) format('woff2');
 7 |   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 8 | }
 9 | /* cyrillic */
10 | @font-face {
11 |   font-family: 'Roboto Mono';
12 |   font-style: normal;
13 |   font-weight: 400;
14 |   src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhPq3-OXg.woff2) format('woff2');
15 |   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
16 | }
17 | /* greek-ext */
18 | @font-face {
19 |   font-family: 'Roboto Mono';
20 |   font-style: normal;
21 |   font-weight: 400;
22 |   src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhHq3-OXg.woff2) format('woff2');
23 |   unicode-range: U+1F00-1FFF;
24 | }
25 | /* greek */
26 | @font-face {
27 |   font-family: 'Roboto Mono';
28 |   font-style: normal;
29 |   font-weight: 400;
30 |   src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhIq3-OXg.woff2) format('woff2');
31 |   unicode-range: U+0370-03FF;
32 | }
33 | /* vietnamese */
34 | @font-face {
35 |   font-family: 'Roboto Mono';
36 |   font-style: normal;
37 |   font-weight: 400;
38 |   src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhEq3-OXg.woff2) format('woff2');
39 |   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
40 | }
41 | /* latin-ext */
42 | @font-face {
43 |   font-family: 'Roboto Mono';
44 |   font-style: normal;
45 |   font-weight: 400;
46 |   src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.woff2) format('woff2');
47 |   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
48 | }
49 | /* latin */
50 | @font-face {
51 |   font-family: 'Roboto Mono';
52 |   font-style: normal;
53 |   font-weight: 400;
54 |   src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2) format('woff2');
55 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
56 | }


--------------------------------------------------------------------------------
/src/img/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbackas/Posterizer-Extension/fb2d3862f97f4f16115adf58b40be1b55aa58e5f/src/img/background.png


--------------------------------------------------------------------------------
/src/img/posterizer-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbackas/Posterizer-Extension/fb2d3862f97f4f16115adf58b40be1b55aa58e5f/src/img/posterizer-icon.png


--------------------------------------------------------------------------------
/src/lib/js/plex.js:
--------------------------------------------------------------------------------
  1 | import dataStore from '../../popup/dataStore';
  2 | import * as browser from 'webextension-polyfill';
  3 | const PlexAPI = require('plex-api');
  4 | const parseString = require('xml2js').parseString;
  5 | 
  6 | // plex client used in requests, it uses tokens
  7 | function PlexClient() {
  8 |   return new Promise((resolve, reject) => {
  9 |     const storageItem = browser.storage.local.get([
 10 |       'token',
 11 |       'selected_server_uri',
 12 |       'selected_lib_id'
 13 |     ]);
 14 |     storageItem.then(res => {
 15 |       const { token, selected_server_uri, selected_lib_id } = res;
 16 | 
 17 |       if (!selected_server_uri) {
 18 |         // TODO open settings page
 19 |         failToSettings('Selected Server URI NULL');
 20 |       }
 21 |       if (!selected_lib_id || selected_lib_id === 'none') {
 22 |         failToSettings('Selected library ID NULL/none');
 23 |       }
 24 | 
 25 |       const url = new URL(selected_server_uri);
 26 |       resolve(
 27 |         new PlexAPI({
 28 |           hostname: url.hostname,
 29 |           port: url.port,
 30 |           https: url.protocol === 'https:',
 31 |           token: token
 32 |         })
 33 |       );
 34 |     });
 35 | 
 36 |     const failToSettings = reason => {
 37 |       dataStore.settings_view = true;
 38 |       return reject(`[Posterizer] Search failed: ${reason}`);
 39 |     };
 40 |   });
 41 | }
 42 | 
 43 | // searches plex for shows based on search text box
 44 | const searchShows = inputText => {
 45 |   PlexClient().then(
 46 |     resolve => {
 47 |       const storageItem = browser.storage.local.get([
 48 |         'selected_lib_id',
 49 |         'token',
 50 |         'selected_server_uri'
 51 |       ]);
 52 |       storageItem.then(res => {
 53 |         const { selected_lib_id, token, selected_server_uri } = res;
 54 | 
 55 |         resolve.query(`/library/sections/${selected_lib_id}/all`).then(
 56 |           result => {
 57 |             const shows = [];
 58 |             result.MediaContainer.Metadata.filter(({ title }) => {
 59 |               return title.toLowerCase().includes(inputText.toLowerCase());
 60 |             }).forEach(show => {
 61 |               // stop the list from getting too big
 62 |               if (shows.length >= 30) return;
 63 | 
 64 |               // builds a fancy URL that is an actually usable to view the image
 65 |               const thumb_url = `${selected_server_uri}/photo/:/transcode?width=111&height=165&minSize=1&url=${selected_server_uri}${
 66 |                 show.thumb
 67 |               }&X-Plex-Token=${token}`;
 68 |               shows.push({
 69 |                 id: show.ratingKey,
 70 |                 name: show.title,
 71 |                 thumb: thumb_url,
 72 |                 api_children: show.key
 73 |               });
 74 |             });
 75 |             dataStore.foundShows = shows;
 76 |           },
 77 |           err => {
 78 |             console.error('Could not connect to server', err);
 79 |           }
 80 |         );
 81 |       });
 82 |     },
 83 |     err => {
 84 |       console.log(`[Posterizer] ${err}`);
 85 |     }
 86 |   );
 87 | };
 88 | 
 89 | // pulls plex season info out of a URL and saves it to store
 90 | const getSeasons = libURL => {
 91 |   console.log(libURL);
 92 |   PlexClient().then(client => {
 93 |     client.query(libURL).then(
 94 |       result => {
 95 |         const seasons = result.MediaContainer.Metadata.filter(({ title }) =>
 96 |           title.match('(Season ([0-9]+)|Specials)')
 97 |         );
 98 |         dataStore.seasons = seasons;
 99 |       },
100 |       function(err) {
101 |         console.error('Could not connect to server', err);
102 |       }
103 |     );
104 |   });
105 | };
106 | 
107 | // searches plex for shows based on search text box
108 | const getOwnedServers = () => {
109 |   return new Promise((resolve, reject) => {
110 |     const storageItem = browser.storage.local.get('token');
111 |     storageItem.then(res => {
112 |       const { token } = res;
113 |       if (!token) return reject(``);
114 | 
115 |       var myHeaders = new Headers();
116 |       myHeaders.append('Content-Type', 'application/json');
117 |       myHeaders.append('Accept', 'application/json');
118 |       myHeaders.append('X-Plex-Token', token);
119 | 
120 |       var requestOptions = {
121 |         method: 'GET',
122 |         headers: myHeaders,
123 |         redirect: 'follow'
124 |       };
125 | 
126 |       fetch('https://plex.tv/api/resources/', requestOptions)
127 |         // convert response XML to json
128 |         .then(response => response.text())
129 |         .then(str => {
130 |           let output = {};
131 |           parseString(str, (err, result) => {
132 |             output = result;
133 |           });
134 |           return output;
135 |         })
136 |         .then(json => {
137 |           let valid_URIs = [
138 |             { key: 'none', value: 'none', name: 'none', text: 'None' }
139 |           ];
140 | 
141 |           const devices = json.MediaContainer.Device;
142 |           Object.keys(devices).forEach(device_key => {
143 |             const device = devices[device_key].$;
144 |             if (device.provides === 'server' && device.owned === '1') {
145 |               const connections = devices[device_key].Connection;
146 |               Object.keys(connections).forEach(connection_key => {
147 |                 const connection = connections[connection_key].$;
148 |                 // if (connection.local === '0') {}
149 |                 valid_URIs.push({
150 |                   key: connection.uri,
151 |                   value: connection.uri,
152 |                   name: device.name,
153 |                   text: `${device.name} - ${connection.uri}`
154 |                 });
155 |               });
156 |             }
157 |           });
158 |           resolve(valid_URIs);
159 |         })
160 |         .catch(error => {
161 |           return reject(error, null);
162 |         });
163 |     });
164 |   });
165 | };
166 | 
167 | // searches plex for shows based on search text box
168 | const getSelectedServerLibraries = () => {
169 |   return new Promise((resolve, reject) => {
170 |     // check if we have a token stored and tell the view not to show login screen
171 |     const storageItem = browser.storage.local.get([
172 |       'token',
173 |       'selected_server_uri',
174 |       'selected_server_name',
175 |       'selected_lib_id',
176 |       'selected_lib_name'
177 |     ]);
178 |     storageItem
179 |       .then(res => {
180 |         const { token, selected_server_uri } = res;
181 | 
182 |         fetchLibraries(token, selected_server_uri);
183 |       })
184 |       .catch(error => {
185 |         return reject(error, null);
186 |       });
187 | 
188 |     const fetchLibraries = (token, selected_server_uri) => {
189 |       if (!token) return reject(``);
190 | 
191 |       var myHeaders = new Headers();
192 |       myHeaders.append('Content-Type', 'application/json');
193 |       myHeaders.append('Accept', 'application/json');
194 |       myHeaders.append('X-Plex-Token', token);
195 | 
196 |       var requestOptions = {
197 |         method: 'GET',
198 |         headers: myHeaders,
199 |         redirect: 'follow'
200 |       };
201 | 
202 |       fetch(`${selected_server_uri}/library/sections/`, requestOptions)
203 |         // convert response XML to json
204 |         .then(response => response.json())
205 |         .then(json => {
206 |           let valid_libs = [{ key: 'none', value: 'none', text: 'None' }];
207 | 
208 |           const libraries = json.MediaContainer.Directory;
209 |           Object.keys(libraries).forEach(lib_index => {
210 |             const library = libraries[lib_index];
211 |             if (library.type === 'show') {
212 |               valid_libs.push({
213 |                 key: library.key,
214 |                 value: library.key,
215 |                 text: `${library.title}`.trim()
216 |               });
217 |             }
218 |           });
219 |           resolve(valid_libs);
220 |         });
221 |     };
222 |   });
223 | };
224 | 
225 | export { searchShows, getSeasons, getOwnedServers, getSelectedServerLibraries };
226 | 


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "1.2.1",
 3 |   "manifest_version": 2,
 4 |   "name": "Posterizer",
 5 |   "description": "Apply posterDB sets to plex",
 6 |   "content_scripts": [
 7 |     {
 8 |       "matches": ["*://*.theposterdb.com/*"],
 9 |       "js": ["lib/js/browser-polyfill.js", "content.js"]
10 |     }
11 |   ],
12 |   "background": {
13 |     "scripts": ["lib/js/browser-polyfill.js", "background.js"]
14 |   },
15 |   "page_action": {
16 |     "browser_style": true,
17 |     "default_title": "Posterizer",
18 |     "default_icon": "img/posterizer-icon.png",
19 |     "default_popup": "popup.html",
20 |     "show_matches": ["*://*.theposterdb.com/*"]
21 |   },
22 |   "permissions": [
23 |     "*://*.theposterdb.com/*",
24 |     "tabs",
25 |     "activeTab",
26 |     "identity",
27 |     "storage",
28 |     "unlimitedStorage"
29 |   ],
30 |   "icons": {
31 |     "128": "img/posterizer-icon.png"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/popup/App.css:
--------------------------------------------------------------------------------
 1 | .app {
 2 |   height: 600px;
 3 |   width: 450px;
 4 | }
 5 | 
 6 | .top {
 7 |   background-color: #282c34;
 8 |   max-height: 14%;
 9 | }
10 | 
11 | .body {
12 |   min-height: 86%;
13 |   background-color: #282c34;
14 |   display: flex;
15 |   flex-direction: column;
16 |   align-items: center;
17 |   text-align: center;
18 |   color: white;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/popup/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import * as browser from 'webextension-polyfill';
 3 | import { view, batch } from '@risingstack/react-easy-state';
 4 | 
 5 | import SearchPage from './components/searchPage';
 6 | import SettingsPage from './components/settingsPage';
 7 | import PlexLogin from './components/plexLogin';
 8 | import TopBar from './components/topBar';
 9 | 
10 | import './App.css';
11 | import dataStore from './dataStore';
12 | 
13 | function App() {
14 |   // check if we have a token stored and tell the view not to show login screen
15 |   const storageItem = browser.storage.local.get([
16 |     'token',
17 |     'selected_server_uri',
18 |     'selected_server_name',
19 |     'selected_lib_id',
20 |     'selected_lib_name'
21 |   ]);
22 |   storageItem.then(res => {
23 |     const {
24 |       token,
25 |       selected_server_uri,
26 |       selected_server_name,
27 |       selected_lib_id,
28 |       selected_lib_name
29 |     } = res;
30 | 
31 |     batch(() => {
32 |       dataStore.plex_authenticated = token && token != '';
33 | 
34 |       dataStore.selected_server = {
35 |         name: selected_server_name,
36 |         uri: selected_server_uri
37 |       };
38 |       dataStore.selected_library = {
39 |         name: selected_lib_name,
40 |         id: selected_lib_id
41 |       };
42 |     });
43 |   });
44 | 
45 |   const { plex_authenticated, settings_view } = dataStore;
46 |   return (
47 |     <div className="app">
48 |       {plex_authenticated ? (
49 |         <div className="top">
50 |           <TopBar />
51 |         </div>
52 |       ) : null}
53 |       <div className="body">
54 |         {plex_authenticated ? (
55 |           !settings_view ? (
56 |             <SearchPage />
57 |           ) : (
58 |             <SettingsPage />
59 |           )
60 |         ) : (
61 |           <PlexLogin />
62 |         )}
63 |       </div>
64 |     </div>
65 |   );
66 | }
67 | 
68 | export default view(App);
69 | 


--------------------------------------------------------------------------------
/src/popup/components/plexLogin.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import * as browser from 'webextension-polyfill';
 3 | import { view } from '@risingstack/react-easy-state';
 4 | import { Segment, Grid, Button, Header } from 'semantic-ui-react';
 5 | 
 6 | // this is all contained inside each plex show on the search list
 7 | class PlexLogin extends React.Component {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   // handle login button - sends it off to get the plex token
13 |   handleLogin = () => {
14 |     browser.runtime.sendMessage({ request: 'fetch_token' });
15 |   };
16 | 
17 |   render() {
18 |     return (
19 |       <React.Fragment>
20 |         <Grid
21 |           centered
22 |           relaxed
23 |           columns={1}
24 |           style={{
25 |             minHeight: 300,
26 |             width: 450,
27 |             margin: '1.5rem',
28 |             marginTop: '5.5rem'
29 |           }}
30 |         >
31 |           <Grid.Column style={{ height: 200, width: 400 }}>
32 |             <Segment
33 |               raised
34 |               style={{ height: '100%', width: '100%' }}
35 |               textAlign="center"
36 |             >
37 |               <Header size="medium">
38 |                 You need to login to Plex to use Posterizer. Click login to
39 |                 trigger the OAuth process.
40 |               </Header>
41 |               <Button onClick={this.handleLogin} content="Login" />
42 |             </Segment>
43 |           </Grid.Column>
44 |         </Grid>
45 |       </React.Fragment>
46 |     );
47 |   }
48 | }
49 | 
50 | export default view(PlexLogin);
51 | 


--------------------------------------------------------------------------------
/src/popup/components/searchItem.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactDOM from 'react-dom';
  3 | import * as browser from 'webextension-polyfill';
  4 | import _ from 'lodash';
  5 | import { view, store } from '@risingstack/react-easy-state';
  6 | import { Button, Image, Modal, Icon, List } from 'semantic-ui-react';
  7 | 
  8 | import dataStore from '../dataStore';
  9 | const plex = require('../../lib/js/plex');
 10 | 
 11 | // const request = require('request');
 12 | const cheerio = require('cheerio');
 13 | 
 14 | // this is all contained inside each plex show on the search list
 15 | class SearchItem extends React.Component {
 16 |   constructor(props) {
 17 |     super(props);
 18 | 
 19 |     this.compStore = store({
 20 |       active: false,
 21 |       readyToApply: false,
 22 |       matchedSeasons: []
 23 |     });
 24 | 
 25 |     this.applyRef = React.createRef();
 26 |   }
 27 | 
 28 |   handleShow = () => (this.compStore.active = true);
 29 |   handleHide = () => (this.compStore.active = false);
 30 | 
 31 |   visualMatchups = <h3>No Matchups</h3>;
 32 | 
 33 |   // When the modal opens, it starts gettin the the season and poster data and matching it
 34 |   handleModalOpen = () => {
 35 |     dataStore.seasons = [];
 36 |     const { show } = this.props;
 37 |     plex.getSeasons(show.api_children);
 38 | 
 39 |     // threw some timeouts in to get around async issues but will use Promises later maybe
 40 |     setTimeout(() => {
 41 |       // parse the posterDB web page for URLs
 42 |       // request source-code it from listener in content_scripts/index.js for current tab
 43 |       dataStore.posterSeasons = {};
 44 |       browser.tabs.query({ active: true, currentWindow: true }).then(tabs => {
 45 |         browser.tabs
 46 |           .sendMessage(tabs[0].id, { req: 'source-code' })
 47 |           .then(response => {
 48 |             // use cheerio to parse out URLs with appropriate titles (seasons)
 49 |             const dlTitleRegex = /(.+) - (Season [0-9]+|Specials).*/;
 50 |             let $ = cheerio.load(response.content);
 51 |             $('a')
 52 |               .filter((i, link) => {
 53 |                 return dlTitleRegex.test(link.attribs.download);
 54 |               })
 55 |               .each((i, link) => {
 56 |                 const href = link.attribs.href;
 57 |                 const seasonTitle = link.attribs.download.match(
 58 |                   dlTitleRegex
 59 |                 )[2];
 60 | 
 61 |                 // save poster URLs to data store
 62 |                 dataStore.posterSeasons[
 63 |                   seasonTitle.toLowerCase()
 64 |                 ] = href.toLowerCase();
 65 |               });
 66 |           });
 67 |       });
 68 |       setTimeout(() => {
 69 |         // matchups of posterDB
 70 |         dataStore.matchups = {};
 71 |         const { seasons, posterSeasons } = dataStore;
 72 |         seasons.forEach(({ title, key }) => {
 73 |           // pull the key PLEX id out of the season
 74 |           const regex_db_id = /\/library\/metadata\/([0-9]+)\//;
 75 |           const db_id_match = key.match(regex_db_id);
 76 |           if (db_id_match) {
 77 |             // if key found
 78 |             const db_id = db_id_match[1];
 79 |             // get posterDBURL from posterSeasons[seasonTitle]
 80 |             const posterDBURL = encodeURIComponent(
 81 |               posterSeasons[title.toLowerCase()]
 82 |             );
 83 |             // add that matchup to the datastore
 84 |             dataStore.matchups[title.toLowerCase()] = [db_id, posterDBURL];
 85 |           }
 86 |         });
 87 | 
 88 |         const { matchups } = dataStore;
 89 |         console.log(matchups);
 90 |         let domNode = ReactDOM.findDOMNode(this.applyRef.current);
 91 |         if (domNode) {
 92 |           // set the visual matchups that show on screen
 93 |           const m = _.cloneDeep(matchups);
 94 |           this.visualMatchups = Object.keys(m).map(season => {
 95 |             const isMatchedUp = m[season][1] != 'undefined';
 96 |             return (
 97 |               <p key={season}>
 98 |                 {season} - {isMatchedUp ? 'matched' : 'unmatched'}
 99 |               </p>
100 |             );
101 |           });
102 | 
103 |           this.compStore.readyToApply = true;
104 |           domNode.addEventListener('click', () => this.handleApply(matchups));
105 |         }
106 |       }, 1500);
107 |     }, 1500);
108 | 
109 |     this.handleHide();
110 |   };
111 | 
112 |   // When the apply button is clicked on the modal popup
113 |   handleApply = m => {
114 |     // sends the matchups to background/index.js to make the POST requests
115 |     browser.runtime.sendMessage({ request: 'post_matchups', matchups: m });
116 | 
117 |     // close the popup
118 |     setTimeout(() => {
119 |       window.close();
120 |     }, 350);
121 |   };
122 | 
123 |   render() {
124 |     const { readyToApply } = this.compStore;
125 |     const { show } = this.props;
126 | 
127 |     return (
128 |       <List.Item key={show.id}>
129 |         <Image width="78" height="110" src={show.thumb} />
130 |         <Image />
131 |         <List.Content>
132 |           <Modal
133 |             trigger={
134 |               <List.Header as="a" onClick={this.handleModalOpen}>
135 |                 {show.name}
136 |               </List.Header>
137 |             }
138 |           >
139 |             <Modal.Header>PosterDB</Modal.Header>
140 |             <Modal.Content>
141 |               <Modal.Description>
142 |                 {/* Gives a little message when matchups are ready */}
143 |                 {readyToApply ? this.visualMatchups : 'Matching up seasons...'}
144 |               </Modal.Description>
145 |             </Modal.Content>
146 |             <Modal.Actions>
147 |               {/* Apply button in the modal - grey and disabled until data is ready */}
148 |               <Button
149 |                 color={readyToApply ? 'green' : 'grey'}
150 |                 disabled={readyToApply ? false : true}
151 |                 ref={this.applyRef}
152 |               >
153 |                 <Icon name="checkmark" />
154 |                 Apply
155 |               </Button>
156 |             </Modal.Actions>
157 |           </Modal>
158 |         </List.Content>
159 |       </List.Item>
160 |     );
161 |   }
162 | }
163 | 
164 | export default view(SearchItem);
165 | 


--------------------------------------------------------------------------------
/src/popup/components/searchPage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { view, store } from '@risingstack/react-easy-state';
 3 | import _ from 'lodash';
 4 | import { Input, Button, Header, List } from 'semantic-ui-react';
 5 | 
 6 | import dataStore from '../dataStore';
 7 | import SearchItem from './searchItem';
 8 | 
 9 | const plex = require('../../lib/js/plex');
10 | 
11 | class SearchPage extends React.Component {
12 |   constructor(props) {
13 |     super(props);
14 | 
15 |     this.compStore = store({
16 |       input_text: '',
17 |       readyToApply: false
18 |     });
19 |   }
20 | 
21 |   handleInput = event => (this.compStore.input_text = event.target.value);
22 | 
23 |   handleSearch = () => {
24 |     const { input_text } = this.compStore;
25 |     plex.searchShows(input_text);
26 |   };
27 | 
28 |   handleKeyPress = event => {
29 |     if (event.key === 'Enter') {
30 |       this.handleSearch();
31 |     }
32 |   };
33 | 
34 |   render() {
35 |     const { foundShows } = dataStore;
36 |     const { input_text } = this.compStore;
37 | 
38 |     return (
39 |       <React.Fragment>
40 |         <div
41 |           style={{
42 |             width: '90%',
43 |             textAlign: 'center',
44 |             paddingTop: '1em'
45 |           }}
46 |         >
47 |           <Input
48 |             placeholder="Search for a show..."
49 |             value={input_text}
50 |             onChange={this.handleInput}
51 |             onKeyPress={this.handleKeyPress}
52 |             style={{ width: '70%' }}
53 |           />
54 |           <Button
55 |             onClick={this.handleSearch}
56 |             content="Search"
57 |             style={{
58 |               width: '25%',
59 |               marginLeft: '1em'
60 |             }}
61 |           />
62 |         </div>
63 |         <List
64 |           size="huge"
65 |           style={{
66 |             marginTop: '1em',
67 |             marginBottom: '1em',
68 |             minHeight: '350px',
69 |             height: '100%',
70 |             width: '90%'
71 |           }}
72 |         >
73 |           {foundShows.map(show => (
74 |             <SearchItem key={show.id} show={_.cloneDeep(show)} />
75 |           ))}
76 |         </List>
77 |         {foundShows.length >= 30 ? (
78 |           <Header size="small" style={{ color: 'white' }}>
79 |             Max of 30 items shown. Try a better query.
80 |           </Header>
81 |         ) : null}
82 |       </React.Fragment>
83 |     );
84 |   }
85 | }
86 | 
87 | export default view(SearchPage);
88 | 


--------------------------------------------------------------------------------
/src/popup/components/settingsPage.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import * as browser from 'webextension-polyfill';
  3 | import { view, batch } from '@risingstack/react-easy-state';
  4 | // import { Input, Button, Segment, Grid, Header } from 'semantic-ui-react';
  5 | import { Button, Dropdown, Segment } from 'semantic-ui-react';
  6 | 
  7 | import '..//';
  8 | import dataStore from '../dataStore';
  9 | 
 10 | const plex = require('../../lib/js/plex');
 11 | 
 12 | class SettingsPage extends React.Component {
 13 |   constructor(props) {
 14 |     super(props);
 15 | 
 16 |     plex.getOwnedServers().then((resolve, reject) => {
 17 |       if (resolve) {
 18 |         dataStore.server_options = resolve;
 19 |       }
 20 |       if (reject) console.log(reject);
 21 |     });
 22 | 
 23 |     const storageItem = browser.storage.local.get([
 24 |       'selected_server_uri',
 25 |       'selected_server_name'
 26 |     ]);
 27 |     storageItem.then(res => {
 28 |       const { selected_server_uri, selected_server_name } = res;
 29 |       if (selected_server_uri && selected_server_name) {
 30 |         batch(() => {
 31 |           dataStore.selected_server = {
 32 |             name: selected_server_name,
 33 |             uri: selected_server_uri
 34 |           };
 35 |         });
 36 |       } else {
 37 |         dataStore.selected_server = {};
 38 |       }
 39 |     });
 40 |   }
 41 | 
 42 |   // handle server selection dropdown
 43 |   handleDropdownClick = (e, { value }) => {
 44 |     const { server_options } = dataStore;
 45 |     const { name } = server_options.find(({ value: val }) => val === value);
 46 | 
 47 |     batch(() => {
 48 |       dataStore.selected_server.name = name;
 49 |       dataStore.selected_server.uri = value;
 50 |     });
 51 |     // set browser storage selected_uri to null if 'none' was selected
 52 |     browser.storage.local.set({
 53 |       selected_server_uri: value === 'none' ? null : value,
 54 |       selected_server_name: name
 55 |     });
 56 |     console.log(`Setting selected_uri: ${name} ${value}`);
 57 | 
 58 |     plex.getSelectedServerLibraries().then((res, rej) => {
 59 |       if (res) {
 60 |         dataStore.library_options = res;
 61 |       }
 62 |       if (rej) dataStore.library_options = [];
 63 |     });
 64 |   };
 65 | 
 66 |   // clear Auth button
 67 |   handleClearAuth = () => {
 68 |     browser.runtime.sendMessage({ request: 'clear_token' });
 69 |     browser.runtime.sendMessage({ request: 'clear_cache' });
 70 | 
 71 |     // close the popup to reset the extension's flow
 72 |     setTimeout(() => {
 73 |       window.close();
 74 |     }, 100);
 75 |   };
 76 | 
 77 |   render() {
 78 |     const { selected_server, server_options } = dataStore;
 79 |     const { uri } = selected_server;
 80 | 
 81 |     const segmentStyle = {
 82 |       width: '90vw',
 83 |       backgroundColor: '#0f141a',
 84 |       textAlign: 'left',
 85 |       margin: '0em 2em 0em 1em'
 86 |     };
 87 | 
 88 |     const groupStyle = {
 89 |       marginTop: '1em'
 90 |     };
 91 | 
 92 |     return (
 93 |       <React.Fragment>
 94 |         <Segment.Group style={groupStyle}>
 95 |           <Segment style={segmentStyle}>
 96 |             <h4>Select Plex Server</h4>
 97 |           </Segment>
 98 |           <Segment style={segmentStyle}>
 99 |             <Dropdown
100 |               placeholder="Plex Server"
101 |               selection
102 |               fluid
103 |               value={uri}
104 |               onChange={this.handleDropdownClick}
105 |               options={server_options}
106 |             />
107 |           </Segment>
108 |         </Segment.Group>
109 |         <Segment.Group style={groupStyle}>
110 |           <Segment style={segmentStyle}>
111 |             <h4>Clear Plex Authentication and reset cache</h4>
112 |           </Segment>
113 |           <Segment style={segmentStyle}>
114 |             <Button negative onClick={this.handleClearAuth}>
115 |               Clear Auth
116 |             </Button>
117 |           </Segment>
118 |         </Segment.Group>
119 |       </React.Fragment>
120 |     );
121 |   }
122 | }
123 | 
124 | export default view(SettingsPage);
125 | 


--------------------------------------------------------------------------------
/src/popup/components/topBar.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import * as browser from 'webextension-polyfill';
  3 | import { view, batch } from '@risingstack/react-easy-state';
  4 | import { Grid, Button, Header, Dropdown } from 'semantic-ui-react';
  5 | 
  6 | import dataStore from '../dataStore';
  7 | 
  8 | const plex = require('../../lib/js/plex');
  9 | 
 10 | // this is all contained inside each plex show on the search list
 11 | class TopBar extends React.Component {
 12 |   constructor(props) {
 13 |     super(props);
 14 | 
 15 |     plex.getSelectedServerLibraries().then((res, rej) => {
 16 |       if (res) {
 17 |         dataStore.library_options = res;
 18 |       }
 19 |       if (rej) dataStore.library_options = [];
 20 |     });
 21 |   }
 22 | 
 23 |   handleDropdownClick = (e, { value }) => {
 24 |     dataStore.selected_library.id = value;
 25 | 
 26 |     const { library_options } = dataStore;
 27 |     const { text: name } = library_options.find(
 28 |       ({ value: val }) => val === value
 29 |     );
 30 | 
 31 |     batch(() => {
 32 |       dataStore.selected_library.name = name;
 33 |       dataStore.selected_library.id = value;
 34 |     });
 35 |     // set browser storage selected_lib_id to null if 'none' was selected
 36 |     browser.storage.local.set({
 37 |       selected_lib_id: value === 'none' ? null : value,
 38 |       selected_lib_name: name
 39 |     });
 40 |     console.log(`Set selected_library: ${name} - ${value}`);
 41 |   };
 42 | 
 43 |   handleSettingsCog = () => {
 44 |     const { settings_view } = dataStore;
 45 |     dataStore.settings_view = !settings_view;
 46 |   };
 47 | 
 48 |   render() {
 49 |     const {
 50 |       settings_view,
 51 |       selected_server,
 52 |       selected_library,
 53 |       library_options
 54 |     } = dataStore;
 55 |     return (
 56 |       <React.Fragment>
 57 |         <Grid
 58 |           centered
 59 |           relaxed
 60 |           style={{
 61 |             width: '100%',
 62 |             margin: 0,
 63 |             backgroundColor: '#FFF'
 64 |           }}
 65 |         >
 66 |           <Grid.Column style={{ width: '30%' }}>
 67 |             <Header size="large" style={{ margin: 0 }}>
 68 |               Posterizer
 69 |             </Header>
 70 |           </Grid.Column>
 71 |           <Grid.Column style={{ width: '50%' }}>
 72 |             <div
 73 |               style={{
 74 |                 display: 'flex',
 75 |                 flexDirection: 'horizontal'
 76 |               }}
 77 |             >
 78 |               <h4 style={{ margin: 0 }}>Plex Server:&nbsp;</h4>
 79 |               {selected_server.name}
 80 |             </div>
 81 | 
 82 |             <Dropdown
 83 |               placeholder="select library..."
 84 |               selection
 85 |               value={selected_library.id}
 86 |               onChange={this.handleDropdownClick}
 87 |               options={library_options}
 88 |             />
 89 |           </Grid.Column>
 90 |           <Grid.Column
 91 |             style={{ width: '20%', textAlign: 'center', padding: '1.5em' }}
 92 |           >
 93 |             <Button
 94 |               icon="cog"
 95 |               active={settings_view}
 96 |               color={settings_view ? 'grey' : null}
 97 |               onClick={this.handleSettingsCog}
 98 |             />
 99 |           </Grid.Column>
100 |         </Grid>
101 |       </React.Fragment>
102 |     );
103 |   }
104 | }
105 | 
106 | export default view(TopBar);
107 | 


--------------------------------------------------------------------------------
/src/popup/dataStore.js:
--------------------------------------------------------------------------------
 1 | import { store } from '@risingstack/react-easy-state';
 2 | 
 3 | const dataStore = store({
 4 |   plex_authenticated: true, // whether a token is saved or not (we dont keep it here tho)
 5 |   settings_view: false, // whether user is shown settings view or not
 6 |   selected_server: {}, // { name: ###, uri: ### }
 7 |   selected_library: {}, // { name: ###, id: ### }
 8 |   server_options: [], // list of plex server connections viable in settings
 9 |   library_options: [], // list of libraries for selected server
10 |   inputText: '',
11 |   foundShows: [],
12 |   seasons: [],
13 |   posterSeasons: {},
14 |   matchups: {}
15 | });
16 | 
17 | export default dataStore;
18 | 


--------------------------------------------------------------------------------
/src/popup/index.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbackas/Posterizer-Extension/fb2d3862f97f4f16115adf58b40be1b55aa58e5f/src/popup/index.css


--------------------------------------------------------------------------------
/src/popup/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import 'semantic-ui-css/semantic.min.css';
 5 | import App from './App';
 6 | 
 7 | ReactDOM.render(
 8 |   <App />,
 9 |   document.getElementById('root')
10 | );
11 | 


--------------------------------------------------------------------------------