{"id":13595819,"url":"https://github.com/brrd/electron-tabs","last_synced_at":"2025-10-08T05:30:38.499Z","repository":{"id":12648978,"uuid":"72448308","full_name":"brrd/electron-tabs","owner":"brrd","description":"Tab component for Electron","archived":true,"fork":false,"pushed_at":"2024-01-08T16:56:33.000Z","size":1087,"stargazers_count":714,"open_issues_count":21,"forks_count":130,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-08-09T05:26:26.027Z","etag":null,"topics":["electron","tab","tabs","typescript","webcomponent","webview"],"latest_commit_sha":null,"homepage":"","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/brrd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2016-10-31T15:09:30.000Z","updated_at":"2025-08-05T02:12:13.000Z","dependencies_parsed_at":"2023-02-18T11:30:39.705Z","dependency_job_id":"991d611b-943c-4e4e-9da5-433cec60d90a","html_url":"https://github.com/brrd/electron-tabs","commit_stats":{"total_commits":185,"total_committers":22,"mean_commits":8.409090909090908,"dds":"0.24864864864864866","last_synced_commit":"49525b8634e949f8875f47dd4700cfe0c94e41a3"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/brrd/electron-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brrd%2Felectron-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brrd%2Felectron-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brrd%2Felectron-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brrd%2Felectron-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brrd","download_url":"https://codeload.github.com/brrd/electron-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brrd%2Felectron-tabs/sbom","scorecard":{"id":254868,"data":{"date":"2025-08-11","repo":{"name":"github.com/brrd/electron-tabs","commit":"d43a1569e031f38918c21867add2cd0844535408"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.9,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":1,"reason":"Found 1/9 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"17 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p","Warn: Project is vulnerable to: GHSA-77xc-hjv8-ww97","Warn: Project is vulnerable to: GHSA-mq8j-3h7h-p8g7","Warn: Project is vulnerable to: GHSA-p2jh-44qj-pf2v","Warn: Project is vulnerable to: GHSA-p7v2-p9m8-qqg7","Warn: Project is vulnerable to: GHSA-7x97-j373-85x5","Warn: Project is vulnerable to: GHSA-7m48-wc93-9g85","Warn: Project is vulnerable to: GHSA-qqvq-6xgj-jw8g","Warn: Project is vulnerable to: GHSA-6r2x-8pq8-9489","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T09:24:29.209Z","repository_id":12648978,"created_at":"2025-08-17T09:24:29.209Z","updated_at":"2025-08-17T09:24:29.209Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278892043,"owners_count":26063919,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["electron","tab","tabs","typescript","webcomponent","webview"],"created_at":"2024-08-01T16:01:58.407Z","updated_at":"2025-10-08T05:30:38.152Z","avatar_url":"https://github.com/brrd.png","language":"TypeScript","readme":"# electron-tabs is discontinued\n\nThank you for your support and contributions all these years.\n\n---\n\n# electron-tabs\n\n\u003e Simple tabs for Electron applications\n\n![Electron Tab Demo](image.jpg)\n\n## Features\n\n* :electron: Compatible with Electron ≥ 17.\n* :lock: Compliant with [Electron security recommendations](https://www.electronjs.org/docs/latest/tutorial/security) (works without `nodeIntegration: true`).\n* :toolbox: Written with TypeScript and Web Components.\n* :hand: Supports drag and drop out of the box.\n* :art: Easily customizable.\n\n## Installation\n\n```bash\nnpm install --save electron-tabs\n```\n\n## Getting started\n\nDefine the following `webPreferences` options in the main process:\n\n```js\nconst mainWindow = new electron.BrowserWindow({\n  webPreferences: {\n    webviewTag: true\n  }\n});\n```\n\nThen add the following markup where you want the tabs to display:\n\n```html\n\u003ctab-group\u003e\u003c/tab-group\u003e\n\n\u003cscript src=\"node_modules/electron-tabs/dist/electron-tabs.js\"\u003e\u003c/script\u003e\n```\n\n## Options\n\nYou can add options by setting `\u003ctab-group\u003e` element attributes:\n\n```html\n\u003ctab-group new-tab-button=\"true\" sortable=\"true\"\u003e\u003c/tab-group\u003e\n```\n\nThe following attributes are supported:\n\n* `close-button-text` (string): text of the tabs \"Close\" button.\n* `new-tab-button` (boolean): set it to true to display the \"New Tab\" button.\n* `new-tab-button-text` (string): text of the \"New Tab\" button.\n* `sortable` (boolean): set it to true to make the tabs sortable by drag and drop.\n* `visibility-threshold` (number): the minimum number of tabs necessary for the tab bar to be displayed. 0 (default) means that it will always remain visible.\n\n## Methods\n\nUse `TabGroup` methods and manipulate tabs in a script after calling `electron-tabs.js`.\n\n```html\n\u003ctab-group new-tab-button=\"true\"\u003e\u003c/tab-group\u003e\n\n\u003cscript src=\"path/to/electron-tabs.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  // Select tab-group\n  const tabGroup = document.querySelector(\"tab-group\");\n\n  // Setup the default tab which is created when the \"New Tab\" button is clicked\n  tabGroup.setDefaultTab({\n    title: \"New Page\",\n    src: \"path/to/new-page.html\",\n    active: true\n  });\n\n  // Do stuff\n  const tab = tabGroup.addTab({\n    title: \"electron-tabs on NPM\",\n    src: \"https://www.npmjs.com/package/electron-tabs\"\n  });\n  const pos = tab.getPosition();\n  console.log(\"Tab position is \" + pos);\n\u003c/script\u003e\n```\n\n### TabGroup\n\n#### `tabGroup.addTab(options)`\n\nAdd a new tab and returns the related `Tab` instance.\n\n* `title`: tab title.\n* `src`: URL to the page which will be loaded into the view. This is actually the same than `options.webview.src`.\n* `badge`: optional text to put into a badge, badge will be hidden if false.\n* `iconURL`: optional URL to the tab icon.\n* `icon`: optional code for a tab icon. Can be used with symbol libraries (example with Font Awesome: `icon: 'fa fa-icon-name'`). This attribute is ignored if an `iconURL` was given.\n* `closable` (default: `true`): if set to `true` the close button won't be displayed and the user won't be able to close the tab. See also `tab.close()`.\n* `visible` (default: `true`): set this to `false` if you don't want to display the tab once it is loaded. If set to `false` then you will need to call `tab.show()` to display the tab.\n* `active` (default: `false`): set this to `true` if you want to activate the tab once it is loaded. Otherwise you will need to call `tab.activate()`.\n* `ready`: a callback function to call once the tab is ready. The `Tab` instance is passed as the only parameter.\n* `webviewAttributes`: attributes to add to the webview tag. See [webview documentation](http://electron.atom.io/docs/api/web-view-tag/#tag-attributes).\n\n#### `tabGroup.setDefaultTab(options)`\n\nDefine default options to use for creating the tab when the \"New Tab\" button is clicked or when calling `tabGroup.addTab()` with no parameter.\n\n```javascript\ntabGroup.setDefaultTab({\n  title: \"New Page\",\n  src: \"path/to/new-page.html\",\n  active: true\n});\n```\n\n#### `tabGroup.getTab(id)`\n\nRetrieve an instance of `Tab` from this `id` (return `null` if not found).\n\n#### `tabGroup.getTabByPosition(position)`\n\nRetrieve an instance of `Tab` from this `position` (return `null` if not found). A negative value is an offset from the right.\n\nTo get the tab in the leftmost position:\n\n```javascript\ntabGroup.getTabByPosition(1);\n```\n\nTo get the tab in the rightmost position:\n\n```javascript\ntabGroup.getTabByPosition(-1);\n```\n\n#### `tabGroup.getTabByRelPosition(position)`\n\nRetrieve an instance of `Tab` from this `position` relative to the active tab (return `null` if not found).\n\n`tabGroup.getNextTab()` is an alias to `tabGroup.getTabByRelPosition(1)`.\n\n`tabGroup.getPreviousTab()` is an alias to `tabGroup.getTabByRelPosition(-1)`.\n\n#### `tabGroup.getActiveTab()`\n\nReturn the active tab (return `null` if none).\n\n#### `tabGroup.getTabs()`\n\nReturn all registered tabs.\n\n#### `tabGroup.eachTab(fn, thisArg)`\n\nLoop through the list of tabs in `tabGroup` and execute the `fn` function for each tab. `fn` is called with the following parameters:\n\n* `currentTab`: the current tab object.\n* `index`: the index of the current tab being processed.\n* `tabs`: the full array of tabs (similar to `tabGroup.getTabs()`).\n\n`thisArg` (optional) is the value to use as `this` when executing `fn`.\n\n### Tab\n\nInstances of `Tab` are returned by the `tabGroup.addTab()` method.\n\n#### `tab.setTitle(title)`\n\nSet tab title.\n\n#### `tab.getTitle()`\n\nGet current tab title.\n\n#### `tab.setBadge(badge)`\n\nSet tab badge.\n\n#### `tab.getBadge()`\n\nGet current tab badge.\n\n#### `tab.setIcon (iconURL, icon)`\n\nSet tab icon (a iconURL or an icon must be given).\n\n#### `tab.getIcon()`\n\nGet current tab icon URL / icon.\n\n#### `tab.setPosition(newPosition)`\n\nMove tab to the specified position. See [`tabGroup.getTabByPosition`](#tabgroupgettabbypositionposition) for information about positions.\n\n#### `tab.getPosition(fromRight)`\n\nGet the tab position. If `fromRight` is true the index returned is negative and is the offset from the right.\n\n#### `tab.activate()`\n\nActivate this tab. The class \"active\" is added to the active tab.\n\n#### `tab.show(flag)`\n\nToggle the \"visible\" class on the tab. `tab.hide()` is an alias to `tab.show(false)`.\n\n#### `tab.hasClass(classname)`\n\nReturn `true` if the tab element has the specified classname. Useful for checking if a tab is \"active\" or \"visible\".\n\n#### `tab.close(force)`\n\nClose the tab (and activate another tab if relevant). When `force` is set to `true` the tab will be closed even if it is not `closable`.\n\n## Events\n\nThe following events are emitted:\n\n* `tabGroup.on(\"tab-added\", (tab, tabGroup) =\u003e { ... });`\n* `tabGroup.on(\"tab-removed\", (tab, tabGroup) =\u003e { ... });`\n* `tabGroup.on(\"tab-active\", (tab, tabGroup) =\u003e { ... });`\n* `tab.on(\"webview-ready\", (tab) =\u003e { ... });`\n* `tab.on(\"webview-dom-ready\", (tab) =\u003e { ... });`\n* `tab.on(\"title-changed\", (title, tab) =\u003e { ... });`\n* `tab.on(\"badge-changed\", (badge, tab) =\u003e { ... });`\n* `tab.on(\"icon-changed\", (icon, tab) =\u003e { ... });`\n* `tab.on(\"active\", (tab) =\u003e { ... });`\n* `tab.on(\"inactive\", (tab) =\u003e { ... });`\n* `tab.on(\"visible\", (tab) =\u003e { ... });`\n* `tab.on(\"hidden\", (tab) =\u003e { ... });`\n* `tab.on(\"close\", (tab) =\u003e { ... });`\n* `tab.on(\"closing\", (tab, abort) =\u003e { ... });` (Use `abort()` function to cancel closing)\n\nYou can also use `tab.once` to automatically remove the listener when invoked:\n\n* `tab.once(\"webview-ready\", (tab) =\u003e { ... });`\n* `tab.once(\"webview-dom-ready\", (tab) =\u003e { ... });`\n\n## Access Electron webview element\n\nYou can access the webview element and use its methods with through the `Tab.webview` attribute. See [webview documentation](https://electronjs.org/docs/api/webview-tag#methods).\n\n```javascript\nlet webview = tab.webview;\nwebview.loadURL(\"file://path/to/new/page.html\");\n```\n\n## Custom styles\n\nTo customize tab-group styles, set new values to [electron-tabs CSS variables](https://github.com/brrd/electron-tabs/blob/master/src/style.css) in your application stylesheet.\n\nSince `TabGroup` is a Web Component you won't be able to change its styles directly from your app stylesheet. If you need more control over it then you can add a `\u003cstyle\u003e` tag inside the `\u003ctab-group \u003e` element:\n\n```html\n\u003ctab-group new-tab-button=\"true\" sortable=\"true\"\u003e\n  \u003cstyle\u003e\n    /* Write your own CSS rules here... */\n  \u003c/style\u003e\n\u003c/tab-group\u003e\n```\n\nThis method is particularly useful when you need to define custom badges or tab styles:\n\n```html\n\u003ctab-group new-tab-button=\"true\" sortable=\"true\"\u003e\n  \u003cstyle\u003e\n    /* Add custom styles */\n    .my-badge {\n      background-color: orange;\n    }\n    .my-custom-tab {\n      color: red;\n      font-weight: bold;\n    }\n  \u003c/style\u003e\n\u003c/tab-group\u003e\n\n\u003cscript src=\"path/to/electron-tabs.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  const tabGroup = document.querySelector(\"tab-group\");\n\n  tabGroup.addTab({\n    title: \"Tab with custom badge\",\n    src: \"page.html\",\n    badge: {\n      text: \"5\",\n      classname: \"my-badge\"\n    }\n  });\n\n  tabGroup.addTab({\n    title: \"Tab with custom style\",\n    src: \"page.html\",\n    ready: function(tab) {\n      tab.element.classList.add(\"my-custom-tab\");\n    }\n  });\n\u003c/script\u003e\n```\n\n## Development\n\n`electron-tabs` uses TypeScript and Parcel under the hood.\n\n### Requirements\n\nGit and Node 12+.\n\n### Build\n\n```bash\n# Clone this repo\ngit clone git@github.com:brrd/electron-tabs.git\ncd electron-tabs\n\n# Install dependencies\nnpm install\n\n# Build\nnpm run build\n\n# ...or watch\nnpm run watch\n```\n\n### Demo\n\n```bash\nnpm run demo\n```\n\n## License\n\nThe MIT License (MIT) - Copyright (c) 2022 Thomas Brouard\n","funding_links":[],"categories":["TypeScript","Electron"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrrd%2Felectron-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrrd%2Felectron-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrrd%2Felectron-tabs/lists"}