[
  {
    "path": ".gitignore",
    "content": "node_modules\nextension/dist\n"
  },
  {
    "path": "README.md",
    "content": "# Tailwind3/Alpine3 Web Extension Boilerplate\nThis is a starting place for building a Web Extension with Tailwindcss & Alpinejs\n\n| | | |\n|:-------------------------:|:-------------------------:|:-------------------------:|\n|<img width=\"1604\" alt=\"Hello World Popup\" src=\"https://user-images.githubusercontent.com/8945177/73615774-972c5300-45d0-11ea-8889-0e813ff172c2.png\">  *Basic Popup with Tailwind* |  <img width=\"1604\" alt=\"Alpine Button Clicked\" src=\"https://user-images.githubusercontent.com/8945177/73615775-972c5300-45d0-11ea-8f29-5a7626767f0f.png\"> *Alpine `@click` Works!* |<img width=\"1604\" alt=\"Hello World Options\" src=\"https://user-images.githubusercontent.com/8945177/73615776-97c4e980-45d0-11ea-836f-b5819a7aa410.png\"> *Basic Options*|\n\n## Installation\n### Setup local project\n* `git clone git@github.com:thomasjohnkane/tailwind-alpine-chrome-extension.git`\n* `npm i && npm run dev`\n\n### Install on Chrome\n* Navigate to `chrome://extensions` in Chrome;\n* Enable the **Developer mode**\n* Click on **Load unpacked extension** (upper left nav)\n* Upload the entire `extension` folder\n\n## Why use this?\n* It automatically puts [tailwindcss.com](https://tailwindcss.com/) into your project\n* It automatically puts [alpinejs](https://github.com/alpinejs/alpine) into your project\n* Hot reload (watches files and updates chrome)\n* Cross browser support (Chrome & Firefox, Safari/Edge TBD)\n* Provides basic `popup.html` & `options.html` (embeded in settings page)\n\n## Goals of project\n- Create a starting point for building web extensions\n- Use alpine.js and tailwind.css\n- Be cross browser (chrome, firefox, safari, edge?)\n- Full DX path integrated\n    - Readme to set it up\n    - Watch script\n    - Env based config files\n    - Hot reloading (https://github.com/rubenspgcavalcante/webpack-extension-reloader)\n    - deploy script (create zip for submitting to store)\n    - Deploy instructions (per browser)\n\n## Roadmap\n- [X] Create folder structure\n- [X] Add webpack\n- [X] Make hello world work in dev\n- [X] Add Tailwindcss\n- [X] Add Alpinejs\n- [X] Add package.json build scripts\n- [X] Add hot reloading\n- [X] Add basic options.html page\n- [ ] Handle sub views and routes for popup\n- [ ] Add basic example of content.js\n- [ ] Add basic example of background.js\n- [X] Update readme with instructions, etc\n- [X] Push to github\n- [ ] Add build-zip script for deployment\n- [ ] Tag release v1.0\n\n## Credit\n* Thanks to Caleb Porzio for Alpinejs\n* Thanks to Adam Watham for Tailwindcss\n* Thanks to @rubenspgcavalcante for Webpack Extension Reload plugin\n* Thanks to @Kocal, @EmailThis, and @williankeller for inspiration\n\n## Security\n\nIf you discover any security related issues, please email instead of using the issue tracker.\n\n## Contributing\n\n1. Fork it (<https://github.com/thomasjohnkane/tailwind-alpine-chrome-extension/fork>)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am 'Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n\n"
  },
  {
    "path": "extension/manifest.json",
    "content": "{\n  \"name\": \"Tunnelme Extension\",\n  \"version\": \"0.0.1\",\n  \"description\": \"Record user actions to generate API endpoints.\",\n  \"manifest_version\": 2,\n  \"browser_action\": {\n    \"default_popup\": \"./dist/popup.html\",\n    \"default_title\": \"Open the popup\",\n    \"default_icon\":\"./dist/icons/icon-16.png\"\n  },\n  \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\",\n  \"content_scripts\": [\n    {\n      \"js\": [\"dist/content.dist.js\"],\n      \"css\": [\"dist/content.css\"],\n      \"matches\": [\"https://*/*\"]\n    }\n  ],\n  \"background\": {\n    \"scripts\": [\"dist/background.dist.js\"]\n  },\n  \"options_ui\": {\n    \"page\": \"dist/options.html\",\n    \"open_in_tab\": false\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"tailwind-alpine-web-extension\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"watch:tailwind\": \"NODE_ENV=development postcss src/tailwind.css -o extension/dist/tailwind.dist.css -w\",\n    \"dev:tailwind\": \"NODE_ENV=development postcss src/tailwind.css -o extension/dist/tailwind.dist.css\",\n    \"build:tailwind\": \"NODE_ENV=production postcss src/tailwind.css -o extension/dist/tailwind.dist.css\",\n    \"dev\": \"concurrently \\\"npm run watch:tailwind\\\" \\\"NODE_ENV=development webpack --config webpack.config.js --mode=development --watch\\\"\",\n    \"build\": \"npm run build:tailwind && webpack --mode production\"\n  },\n  \"devDependencies\": {\n    \"alpinejs\": \"^3.7.1\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"concurrently\": \"^6.5.1\",\n    \"copy-webpack-plugin\": \"^10.2.0\",\n    \"cross-env\": \"^7.0.3\",\n    \"postcss-cli\": \"^9.1.0\",\n    \"postcss-loader\": \"^6.2.1\",\n    \"tailwindcss\": \"^3.0.7\",\n    \"webpack\": \"^5.65.0\",\n    \"webpack-cli\": \"^4.9.1\",\n    \"webpack-extension-reloader\": \"^1.1.4\"\n  }\n}\n"
  },
  {
    "path": "postcss.config.js",
    "content": "const tailwindcss = require('tailwindcss');\nmodule.exports = {\n    plugins: [\n        tailwindcss('./tailwind.config.js'),\n        require('autoprefixer'),\n    ],\n};\n"
  },
  {
    "path": "src/background/index.js",
    "content": "\n"
  },
  {
    "path": "src/content/index.css",
    "content": "@import \"../dist/tailwind.dist.css\"\n"
  },
  {
    "path": "src/content/index.js",
    "content": "import Alpine from 'alpinejs'\n \nwindow.Alpine = Alpine\n \nAlpine.start()\n"
  },
  {
    "path": "src/options/index.css",
    "content": "@import \"../dist/tailwind.dist.css\"\n"
  },
  {
    "path": "src/options/index.html",
    "content": "<html>\n    <head>\n        <link rel=\"stylesheet\" type=\"text/css\" href=\"./options.css\">\n    </head>\n    <body>\n        <div class=\"px-6 py-2\">\n            <h1 class=\"text-gray-500 text-2xl\">Options Page</h1>\n            <p class=\"py-2 text-lg tracking-wide\">\n                Update me in <span class=\"inline-block bg-gray-100 rounded-sm text-sm p-1 leading-none whitespace-no-wrap text-purple-600 font-mono align-baseline\">`src/options/index.html`</span>\n            </p>\n            <label class=\"md:w-2/3 block text-gray-500 font-bold\">\n              <input class=\"mr-2 leading-tight\" type=\"checkbox\" checked>\n              <span class=\"text-sm\">\n                Send me your newsletter!\n              </span>\n            </label>\n            <div class=\"py-2\">\n                <button\n                    class=\"bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow\"\n                >\n                    Save\n                </button>\n            </div>\n        </div>\n        <script type=\"text/javascript\" src=\"./options.dist.js\"></script>\n    </body>\n</html>\n"
  },
  {
    "path": "src/options/index.js",
    "content": "import Alpine from 'alpinejs'\n \nwindow.Alpine = Alpine\n \nAlpine.start()\n"
  },
  {
    "path": "src/popup/index.css",
    "content": "@import \"../dist/tailwind.dist.css\"\n"
  },
  {
    "path": "src/popup/index.html",
    "content": "<html>\n    <head>\n        <link rel=\"stylesheet\" type=\"text/css\" href=\"./popup.css\">\n    </head>\n    <body>\n        <div class=\"p-6 min-w-2xl h-64\">\n            <h1 class=\"text-gray-500 text-2xl\">Hello Web Extension</h1>\n            <p class=\"py-2 text-lg tracking-wide\">\n                Update me in <span class=\"inline-block bg-gray-100 rounded-sm text-sm p-1 leading-none whitespace-no-wrap text-purple-600 font-mono align-baseline\">`src/popup/index.html`</span>\n            </p>\n            <hr />\n            <div class=\"py-2\" x-data=\"{ open: false }\">\n                <button\n                    class=\"bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow\"\n                    @click=\"open = true\"\n                >\n                    Test Alpine\n                </button>\n\n                <div\n                    class=\"mt-4 bg-gray-100 text-center rounded-sm\"\n                    x-show=\"open\"\n                    @click.away=\"open = false\"\n                >\n                    <div class=\"w-full text-4xl text-teal-500 p-4\">Great Scott!</div>\n                </div>\n            </div>\n        </div>\n        <script type=\"text/javascript\" src=\"./popup.dist.js\"></script>\n    </body>\n</html>\n"
  },
  {
    "path": "src/popup/index.js",
    "content": "import Alpine from 'alpinejs'\n \nwindow.Alpine = Alpine\n \nAlpine.start()\n"
  },
  {
    "path": "src/tailwind.css",
    "content": "@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n"
  },
  {
    "path": "tailwind.config.js",
    "content": "module.exports = {\n  content: [\"./src/**/*.{html,js}\"],\n  theme: {\n    minWidth: {\n      '0': '0',\n      'popup': '350px',\n      full: '100%'\n    },\n    extend: {}\n  },\n  variants: {},\n  plugins: []\n}\n"
  },
  {
    "path": "webpack.config.js",
    "content": "const ExtensionReloader  = require('webpack-extension-reloader');\nconst CopyPlugin = require('copy-webpack-plugin');\nconst path = require('path');\n\nconst contentScripts = {\n  content: './content/index.js'\n}\nconst extensionPages = {\n  options: './options/index.js',\n  popup: './popup/index.js',\n}\n\nlet config = {\n  mode: process.env.NODE_ENV,\n  context: __dirname + '/src'\n};\n\nlet ExtensionConfig = Object.assign({}, config, {\n    entry: {\n      background: './background/index.js',\n      ...contentScripts,\n      ...extensionPages\n    },\n    output: {\n      path: __dirname + '/extension/dist/',\n      filename: '[name].dist.js',\n    },\n    plugins: [\n      new ExtensionReloader({\n        port: 9090,\n        reloadPage: true,\n        entries: {\n          contentScript: Object.keys(contentScripts),\n          extensionPage: Object.keys(extensionPages),\n          background: 'background'\n        }\n      }),\n      new CopyPlugin({\n          patterns: [\n            {\n                from: './icons/*',\n                to: __dirname + '/extension/dist/',\n            },\n            {\n                from: './popup/index.html',\n                to: __dirname + '/extension/dist/popup.html',\n            },\n            {\n                from: './popup/index.css',\n                to: __dirname + '/extension/dist/popup.css',\n            },\n            {\n                from: './options/index.html',\n                to: __dirname + '/extension/dist/options.html',\n            },\n            {\n                from: './options/index.css',\n                to: __dirname + '/extension/dist/options.css',\n            },\n            {\n                from: './content/index.css',\n                to: __dirname + '/extension/dist/content.css',\n            },\n          ]\n      }),\n    ]\n});\n\nmodule.exports = [\n    ExtensionConfig,\n];\n"
  }
]