{"id":13798625,"url":"https://github.com/abhijithvijayan/wext-manifest-loader","last_synced_at":"2025-04-28T16:04:10.179Z","repository":{"id":57150197,"uuid":"218565653","full_name":"abhijithvijayan/wext-manifest-loader","owner":"abhijithvijayan","description":"Webextension Manifest Generator that you specify `manifest.json` properties to appear only in specific browsers and environment","archived":false,"fork":false,"pushed_at":"2024-04-19T20:11:46.000Z","size":81,"stargazers_count":27,"open_issues_count":2,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-28T16:03:25.584Z","etag":null,"topics":["generator","javascript","manifest","nodejs","npm","webextension"],"latest_commit_sha":null,"homepage":"https://github.com/abhijithvijayan/web-extension-starter","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abhijithvijayan.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["abhijithvijayan"],"patreon":"abhijithvijayan","open_collective":"abhijithvijayan","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":"abhijithvijayan","otechie":null,"custom":["https://www.buymeacoffee.com/abhijithvijayan","https://www.paypal.me/iamabhijithvijayan"]}},"created_at":"2019-10-30T15:55:32.000Z","updated_at":"2025-01-14T05:40:39.000Z","dependencies_parsed_at":"2024-04-19T21:28:57.648Z","dependency_job_id":"ccc88b94-8c83-4abf-a517-32171625d5bb","html_url":"https://github.com/abhijithvijayan/wext-manifest-loader","commit_stats":{"total_commits":101,"total_committers":2,"mean_commits":50.5,"dds":0.00990099009900991,"last_synced_commit":"88ae3f675bf6a9b108da0d95eb1d565ec8c8beb0"},"previous_names":["abhijithvijayan/wext-manifest"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Fwext-manifest-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Fwext-manifest-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Fwext-manifest-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Fwext-manifest-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abhijithvijayan","download_url":"https://codeload.github.com/abhijithvijayan/wext-manifest-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251342721,"owners_count":21574244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["generator","javascript","manifest","nodejs","npm","webextension"],"created_at":"2024-08-04T00:00:47.426Z","updated_at":"2025-04-28T16:04:10.127Z","avatar_url":"https://github.com/abhijithvijayan.png","language":"TypeScript","funding_links":["https://github.com/sponsors/abhijithvijayan","https://patreon.com/abhijithvijayan","https://opencollective.com/abhijithvijayan","https://issuehunt.io/r/abhijithvijayan","https://www.buymeacoffee.com/abhijithvijayan","https://www.paypal.me/iamabhijithvijayan","https://www.patreon.com/abhijithvijayan","https://www.buymeacoffee.com/abhijithvijayan'"],"categories":["TypeScript","Tools"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ewext-manifest-loader\u003c/h1\u003e\n\u003cp align=\"center\"\u003eWebpack Loader for Webextension manifest\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/wext-manifest-loader\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/wext-manifest-loader\" alt=\"NPM\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/abhijithvijayan/wext-manifest-loader\"\u003e\n    \u003cimg src=\"https://travis-ci.com/abhijithvijayan/wext-manifest-loader.svg?branch=main\" alt=\"Travis Build\" /\u003e\n  \u003c/a\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/abhijithvijayan/wext-manifest-loader\"\u003e\n    \u003cimg src=\"https://img.shields.io/david/abhijithvijayan/wext-manifest-loader.svg?colorB=orange\" alt=\"DEPENDENCIES\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/abhijithvijayan/wext-manifest-loader/blob/main/license\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/abhijithvijayan/wext-manifest-loader.svg\" alt=\"LICENSE\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=Check%20out%20wext-manifest-loader%21%20by%20%40_abhijithv%0A%0AWebpack%20Loader%20for%20Webextension%20manifest%0Ahttps%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fwext-manifest-loader%0A%0A%23webpack%20%23loader%20%23manifest%20%23javascript%20%23webextensions\"\u003e\n     \u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\" alt=\"TWEET\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003ch3 align=\"center\"\u003e🙋‍♂️ Made by \u003ca href=\"https://twitter.com/_abhijithv\"\u003e@abhijithvijayan\u003c/a\u003e\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  Donate:\n  \u003ca href=\"https://www.paypal.me/iamabhijithvijayan\" target='_blank'\u003e\u003ci\u003e\u003cb\u003ePayPal\u003c/b\u003e\u003c/i\u003e\u003c/a\u003e,\n  \u003ca href=\"https://www.patreon.com/abhijithvijayan\" target='_blank'\u003e\u003ci\u003e\u003cb\u003ePatreon\u003c/b\u003e\u003c/i\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href='https://www.buymeacoffee.com/abhijithvijayan' target='_blank'\u003e\n    \u003cimg height='36' style='border:0px;height:36px;' src='https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/orange_img.png' border='0' alt='Buy Me a Coffee' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003chr /\u003e\n\nGenerate browser tailored `manifest.json` for Web Extensions that you specify properties to appear only in specific browsers.\n\n❤️ it? ⭐️ it on [GitHub](https://github.com/abhijithvijayan/wext-manifest-loader/stargazers) or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20wext-manifest-loader%21%20by%20%40_abhijithv%0A%0AWebpack%20Loader%20for%20Webextension%20manifest%0Ahttps%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fwext-manifest-loader%0A%0A%23webpack%20%23loader%20%23manifest%20%23javascript%20%23webextensions) about it.\n\n## Table of Contents\n\n- [Browser Support](#browser-support)\n- [Installation](#installation)\n- [Usage](#usage)\n- [FAQs](#faqs)\n- [Issues](#issues)\n  - [🐛 Bugs](#-bugs)\n- [LICENSE](#license)\n\n## Browser Support\n\n| [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](/) | [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](/) | [![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)](/) | [![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](/) |\n--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| ✔ | ✔ | ✔ | ✔ |\n\nThis loader will take a definition input for the manifest, and return you content for the specified browser.\n\n### Looking for Web Extension starter\n\nCheckout [web-extension-starter](https://github.com/abhijithvijayan/web-extension-starter) that uses this package\n\n## Installation\n\nEnsure you have [Node.js](https://nodejs.org) 10 or later installed. Then run the following:\n\n```sh\n# via npm\nnpm install --save-dev wext-manifest-loader wext-manifest-webpack-plugin\n\n# or yarn\nyarn add wext-manifest-loader wext-manifest-webpack-plugin --dev\n```\n\n## Usage\n\nYou can easily use this module together with the [`wext-manifest-webpack-plugin`](https://www.npmjs.com/package/wext-manifest-webpack-plugin) to output the `manifest.json` as part of your build process **without** any additional js bundle and with auto rebundling on file change.\n\n**Note:** Make sure you pass a **TARGET_BROWSER** env variable with one of `chrome/firefox/edge/opera` value\n\n#### Sample manifest with vendor prefixed keys\n\n\u003chttps://github.com/abhijithvijayan/web-extension-starter/blob/react-typescript/source/manifest.json\u003e\n\n\u003e **webpack.config.js**\n\n```js\n// ... other plugins\nconst WextManifestWebpackPlugin = require(\"wext-manifest-webpack-plugin\");\n\nconst targetBrowser = process.env.TARGET_BROWSER;\nconst destPath = path.join(__dirname, 'extension');\n\nmodule.exports = {\n    entry: {\n        manifest: './src/manifest.json',\n        // ...\n    },\n\n    output: {\n        path: path.join(destPath, targetBrowser),\n        filename: 'js/[name].bundle.js',\n    },\n\n    module: {\n        rules: [\n            {\n                type: 'javascript/auto', // prevent webpack handling json with its own loaders,\n                test: /manifest\\.json$/,\n                use: 'wext-manifest-loader',\n                exclude: /node_modules/,\n            },\n        ]\n    },\n\n    plugins: [\n        new WextManifestWebpackPlugin(),\n        // ...\n    ],\n};\n```\n\n## Options\n\n### `usePackageJSONVersion`\n\nType: `Boolean`\nDefault: `false`\n\nIf true, updates manifest.json `version` field with `package.json` version. It is often useful for easy release of web-extension.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        type: 'javascript/auto', // prevent webpack handling json with its own loaders,\n        test: /manifest\\.json$/,\n        use: {\n            loader: 'wext-manifest-loader',\n            options: {\n                usePackageJSONVersion: true,\n            },\n        },\n        exclude: /node_modules/,\n      },\n    ],\n  },\n};\n```\n\n\u003chr /\u003e\n\n## FAQs\n\n### 1.What are vendor prefixed manifest keys\n\nVendor prefixed manifest keys allow you to write one `manifest.json` for multiple vendors.\n\n```js\n{\n  \"__chrome__name\": \"AwesomeChrome\",\n  \"__firefox__name\": \"AwesomeFirefox\",\n  \"__edge__name\": \"AwesomeEdge\",\n  \"__opera__name\": \"AwesomeOpera\"\n}\n```\n\nif the **TARGET_BROWSER** is `chrome` this compiles to:\n\n```js\n{\n  \"name\": \"AwesomeChrome\",\n}\n```\n\n---\n\nAdd keys to multiple vendors by seperating them with `|` in the prefix\n\n```\n{\n  __chrome|opera__name: \"AwesomeExtension\"\n}\n```\n\nif the vendor is `chrome` or `opera`, this compiles to:\n\n```\n{\n  \"name\": \"AwesomeExtension\"\n}\n```\n\n### 2. How can I conditionally set keys based on environment\n\n```js\n{\n  \"__dev__name\": \"NameInDevelopment\",\n  \"__prod__name\": \"NameInProduction\",\n  \"__chrome|firefox|dev__description\": \"DescriptionInDevelopmentForSetOfBrowsers\",\n  \"__chrome|firefox|prod__description\": \"DescriptionInProductionForSetOfBrowsers\"\n}\n```\n\nif the **NODE_ENV** is `production` and the **TARGET_BROWSER** is `chrome` this compiles to:\n\n```js\n{\n  \"name\": \"NameInProduction\",\n  \"description\": \"DescriptionInProductionForSetOfBrowsers\"\n}\n```\n\nelse\n\n```js\n{\n  \"name\": \"NameInDevelopment\",\n  \"description\": \"DescriptionInDevelopmentForSetOfBrowsers\"\n}\n```\n\n## Issues\n\n_Looking to contribute? Look for the [Good First Issue](https://github.com/abhijithvijayan/wext-manifest-loader/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22)\nlabel._\n\n### 🐛 Bugs\n\nPlease file an issue [here](https://github.com/abhijithvijayan/wext-manifest-loader/issues/new) for bugs, missing documentation, or unexpected behavior.\n\n[**See Bugs**](https://github.com/abhijithvijayan/wext-manifest-loader/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22type%3A+bug%22)\n\n### Linting \u0026 TypeScript Config\n\n- Shared Eslint \u0026 Prettier Configuration - [`@abhijithvijayan/eslint-config`](https://www.npmjs.com/package/@abhijithvijayan/eslint-config)\n- Shared TypeScript Configuration - [`@abhijithvijayan/tsconfig`](https://www.npmjs.com/package/@abhijithvijayan/tsconfig)\n\n## Credits\n\nThanks to [@fregante](https://github.com/fregante) for suggesting to convert initial (`wext-manifest`) module to webpack loader(`wext-manifest-loader`)\n\n## License\n\nMIT © [Abhijith Vijayan](https://abhijithvijayan.in)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhijithvijayan%2Fwext-manifest-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhijithvijayan%2Fwext-manifest-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhijithvijayan%2Fwext-manifest-loader/lists"}