├── screenshot.png ├── .vscode └── settings.json ├── src-assets-chrome ├── icon-dark-outlined-16.png ├── icon-dark-outlined-32.png ├── icon-dark-outlined-48.png ├── icon-dark-outlined-128.png ├── icon-light-outlined-16.png ├── icon-light-outlined-32.png └── manifest.json ├── tsconfig.json ├── src ├── firefox.ts ├── chrome.ts └── tabMover.ts ├── .eslintrc.json ├── src-assets-ff ├── manifest.json ├── icon-dark.svg └── icon-light.svg ├── LICENSE ├── package.json ├── .gitignore └── README.md /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rshev/MoveTabToNextWindow/HEAD/screenshot.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib", 3 | "eslint.enable": true 4 | } -------------------------------------------------------------------------------- /src-assets-chrome/icon-dark-outlined-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rshev/MoveTabToNextWindow/HEAD/src-assets-chrome/icon-dark-outlined-16.png -------------------------------------------------------------------------------- /src-assets-chrome/icon-dark-outlined-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rshev/MoveTabToNextWindow/HEAD/src-assets-chrome/icon-dark-outlined-32.png -------------------------------------------------------------------------------- /src-assets-chrome/icon-dark-outlined-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rshev/MoveTabToNextWindow/HEAD/src-assets-chrome/icon-dark-outlined-48.png -------------------------------------------------------------------------------- /src-assets-chrome/icon-dark-outlined-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rshev/MoveTabToNextWindow/HEAD/src-assets-chrome/icon-dark-outlined-128.png -------------------------------------------------------------------------------- /src-assets-chrome/icon-light-outlined-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rshev/MoveTabToNextWindow/HEAD/src-assets-chrome/icon-light-outlined-16.png -------------------------------------------------------------------------------- /src-assets-chrome/icon-light-outlined-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rshev/MoveTabToNextWindow/HEAD/src-assets-chrome/icon-light-outlined-32.png -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "ES2020", 5 | "jsx": "preserve", 6 | "sourceMap": true, 7 | "lib": ["ES2020", "DOM"], 8 | "strict": true, 9 | "noUnusedLocals": true, 10 | "noUnusedParameters": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noUncheckedIndexedAccess": true 14 | }, 15 | "exclude": ["node_modules", "**/node_modules/*"] 16 | } 17 | -------------------------------------------------------------------------------- /src/firefox.ts: -------------------------------------------------------------------------------- 1 | import { TabMover } from "./tabMover"; 2 | 3 | const tabMover = new TabMover(); 4 | 5 | browser.menus.create({ 6 | contexts: ["tab"], 7 | onclick: (_, tab) => tabMover.moveTabOrHighlightedTabs(tab), 8 | title: "Move to the next window", 9 | }); 10 | browser.browserAction.onClicked.addListener((tab) => tabMover.moveTabOrHighlightedTabs(tab)); 11 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 12 | // @ts-ignore 13 | browser.commands.onCommand.addListener((_, tab) => tabMover.moveTabOrHighlightedTabs(tab)); 14 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "es6": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:@typescript-eslint/eslint-recommended", 10 | "plugin:@typescript-eslint/recommended" 11 | ], 12 | "globals": { 13 | "Atomics": "readonly", 14 | "SharedArrayBuffer": "readonly" 15 | }, 16 | "parser": "@typescript-eslint/parser", 17 | "parserOptions": { 18 | "ecmaVersion": 11 19 | }, 20 | "plugins": [ 21 | "@typescript-eslint" 22 | ], 23 | "rules": { 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src-assets-chrome/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Move Tab to Next Window", 4 | "version": "1.2.0", 5 | "description": "One-click to move a tab to the next window", 6 | "homepage_url": "https://github.com/rshev/MoveTabToNextWindow", 7 | "permissions": ["tabGroups", "storage"], 8 | "background": { 9 | "service_worker": "index.js" 10 | }, 11 | "icons": { 12 | "16": "icon-dark-outlined-16.png", 13 | "32": "icon-dark-outlined-32.png", 14 | "48": "icon-dark-outlined-48.png", 15 | "128": "icon-dark-outlined-128.png" 16 | }, 17 | "action": { 18 | "default_title": "Move Tab to Next Window", 19 | "default_icon": { 20 | "16": "icon-light-outlined-16.png", 21 | "32": "icon-light-outlined-32.png" 22 | } 23 | }, 24 | "commands": { 25 | "move-tab": { 26 | "description": "Move Tab to Next Window" 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src-assets-ff/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "Move Tab to Next Window", 4 | "version": "1.2.0", 5 | "description": "One-click to move a tab to the next window from a button or tab context menu", 6 | "homepage_url": "https://github.com/rshev/MoveTabToNextWindow", 7 | "permissions": ["menus"], 8 | "background": { 9 | "scripts": ["index.js"] 10 | }, 11 | "icons": { 12 | "48": "icon-dark.svg", 13 | "96": "icon-dark.svg" 14 | }, 15 | "browser_action": { 16 | "default_title": "Move Tab to Next Window", 17 | "default_icon": "icon-dark.svg", 18 | "theme_icons": [ 19 | { 20 | "dark": "icon-dark.svg", 21 | "light": "icon-light.svg", 22 | "size": 16 23 | }, 24 | { 25 | "dark": "icon-dark.svg", 26 | "light": "icon-light.svg", 27 | "size": 32 28 | } 29 | ] 30 | }, 31 | "commands": { 32 | "move-tab": { 33 | "description": "Move Tab to Next Window" 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Roman Shevtsov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/chrome.ts: -------------------------------------------------------------------------------- 1 | import { TabMover, Tab, Data } from "./tabMover"; 2 | 3 | // chrome-specific hooks 4 | const loadData = (): Promise => { 5 | return new Promise((resolve) => chrome.storage.local.get((items) => resolve(items))); 6 | }; 7 | const saveData = (data: Data): Promise => { 8 | return new Promise((resolve) => chrome.storage.local.set(data, () => resolve())); 9 | }; 10 | const tabMoveWrapper = async (tab: Tab, moveOperation: () => Promise) => { 11 | if (tab.groupId == null || tab.groupId === chrome.tabGroups.TAB_GROUP_ID_NONE) { 12 | await moveOperation(); 13 | return; 14 | } 15 | 16 | const group = await chrome.tabGroups.get(tab.groupId); 17 | const { color, title } = group; 18 | 19 | const targetWindowId = await moveOperation(); 20 | 21 | const existingTargetGroup = ( 22 | await chrome.tabGroups.query({ 23 | color: color, 24 | title: title, 25 | windowId: targetWindowId, 26 | }) 27 | )[0]; 28 | 29 | if (existingTargetGroup != null) { 30 | await chrome.tabs.group({ 31 | groupId: existingTargetGroup.id, 32 | tabIds: tab.id, 33 | }); 34 | } else { 35 | const newGroupId = await chrome.tabs.group({ 36 | createProperties: { windowId: targetWindowId }, 37 | tabIds: tab.id, 38 | }); 39 | await chrome.tabGroups.update(newGroupId, { 40 | color: color, 41 | title: title, 42 | }); 43 | } 44 | }; 45 | 46 | // register 47 | const tabMover = new TabMover(loadData, saveData, tabMoveWrapper); 48 | chrome.runtime.onStartup.addListener(() => chrome.storage.local.clear()); 49 | chrome.action.onClicked.addListener((tab) => tabMover.moveTabOrHighlightedTabs(tab)); 50 | chrome.commands.onCommand.addListener((_, tab) => tabMover.moveTabOrHighlightedTabs(tab)); 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "move-tab-to-next-window", 3 | "version": "1.0.0", 4 | "description": "Move tab to next window browser context menu extension", 5 | "homepage": "https://github.com/rshev/MoveTabToNextWindow", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "clean": "rm -rf dist/ && mkdir dist || true", 9 | "build-assets-ff": "cp src-assets-ff/* dist/", 10 | "build-assets-chrome": "cp src-assets-chrome/* dist/", 11 | "_dev-watch": "microbundle watch -f cjs --no-compress", 12 | "dev-ff": "npm run clean && npm run build-assets-ff && npm run _dev-watch -- src/firefox.ts", 13 | "dev-chrome": "npm run clean && npm run build-assets-chrome && npm run _dev-watch -- src/chrome.ts", 14 | "_build": "microbundle build -f cjs --no-sourcemap", 15 | "build-ff": "npm run clean && npm run build-assets-ff && npm run _build -- src/firefox.ts", 16 | "build-chrome": "npm run clean && npm run build-assets-chrome && npm run _build chrome -- src/chrome.ts", 17 | "zip-ff": "npm run build-ff && cd dist && bestzip dist-ff.zip * && cd .. && bestzip dist/src-ff.zip src src-assets-ff *.json *.md LICENSE", 18 | "zip-chrome": "npm run build-chrome && cd dist && bestzip dist-chrome.zip *" 19 | }, 20 | "keywords": [], 21 | "author": "Roman Shevtsov", 22 | "license": "MIT", 23 | "main": "dist/index.js", 24 | "types": ".cache/null", 25 | "devDependencies": { 26 | "@types/chrome": "^0.0.293", 27 | "@types/firefox-webext-browser": "^82.0.0", 28 | "@typescript-eslint/eslint-plugin": "^8.19.1", 29 | "@typescript-eslint/parser": "^8.19.1", 30 | "bestzip": "^2.2.0", 31 | "eslint": "^9.18.0", 32 | "microbundle": "^0.13.3", 33 | "typescript": "^4.3.4", 34 | "webextension-polyfill-ts": "^0.25.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Move Tab to Next Window browser extension 2 | 3 | A browser extension which adds a tab context menu item (Firefox) and a button action (Firefox & Chrome) to move a tab to the next window. 4 | 5 | Especially useful for these amazing multi-monitor setups when it's too annoying to drag tabs around between windows. 6 | 7 | - Mozilla Firefox: https://addons.mozilla.org/en-GB/firefox/addon/move-tab-to-next-window/ 8 | - Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/ndjiippfnecdmbjenbcnjdbjnopkamno 9 | - Google Chrome: https://chrome.google.com/webstore/detail/move-tab-to-next-window/ibpemckpjfpmhlagogddlajhaiemdjaf 10 | 11 | ![Screenshot](screenshot.png) 12 | 13 | ## Quick feature list 14 | 15 | - the source tab position is saved in all windows, so if it's moved back into a window, it moves into its original position 16 | - CHROMIUM: if the tab is in a tab group, when moving it the identical group will be created or used in another window 17 | - multiple tabs move - select multiple tabs (use shift or cmd/ctrl) and move all of them into the next window in the same order 18 | - if the tab is active, it will become active in the new window 19 | - if the tab is inactive, it will stay inactive in the new window 20 | - if there is only 1 window, a new window will be opened on move 21 | - keyboard shortcut support 22 | 23 | ## Setting up keyboard shortcuts 24 | 25 | #### Chromium-based browsers 26 | 1. Go to Settings -> Extensions 27 | 2. Click Keyboard Shortcuts on the top left sidebar 28 | 3. Find "Move Tab to Next Window" and add your desired shortcut 29 | 30 | #### Firefox-based browsers 31 | 1. Visit the "Add-ons and Themes" page 32 | 2. Click on the gear icon next to "Manage Your Extensions" 33 | 3. Click on "Manage Extension Shortcuts" 34 | 4. Find "Move Tab to Next Window" and add your desired shortcut 35 | 36 | ## Technologies used 37 | 38 | - TypeScript in strict mode for safety 39 | - Microbundler to build and transpile ts changes 40 | - `webextension-polyfill` for compatibility with both Firefox and Chrome 41 | - ESLint for linting 42 | 43 | ## Contributions are welcome 44 | 45 | Prerequisites: 46 | 47 | - Node and NPM 48 | - VS Code (recommended) 49 | 50 | How to contribute: 51 | 52 | - fork the project 53 | - `npm install` 54 | - `npm run dev-ff` or `npm run dev-chrome`, load unpacked extension from `dist` directory. 55 | - make changes, open a PR 56 | -------------------------------------------------------------------------------- /src-assets-ff/icon-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src-assets-ff/icon-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/tabMover.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ 2 | /* eslint-disable @typescript-eslint/no-empty-function */ 3 | import { browser } from "webextension-polyfill-ts"; 4 | 5 | export interface Tab { 6 | id?: number; 7 | windowId?: number; 8 | groupId?: number; 9 | index: number; 10 | active: boolean; 11 | } 12 | 13 | export interface Data { 14 | [key: string]: Tab; 15 | } 16 | export class TabMover { 17 | private originalTabInfoByTabWindowId: Data = {}; 18 | 19 | private tabWindowId(tabId: number, windowId: number): string { 20 | return `${tabId}:${windowId}`; 21 | } 22 | 23 | constructor( 24 | private loadData?: () => Promise, 25 | private saveData: (data: Data) => Promise = async () => {}, 26 | private tabMoveWrapper: ( 27 | tab: Tab, 28 | moveOperation: () => Promise 29 | ) => Promise = async (_, moveOperation) => { 30 | await moveOperation(); 31 | } 32 | ) {} 33 | 34 | async moveTabOrHighlightedTabs(tab: Tab) { 35 | const highlightedTabs = await browser.tabs.query({ 36 | highlighted: true, 37 | currentWindow: true, 38 | }); 39 | if (highlightedTabs.length > 1) { 40 | for (const tab of highlightedTabs) { 41 | await this.moveTab(tab); 42 | } 43 | } else { 44 | await this.moveTab(tab); 45 | } 46 | } 47 | 48 | async moveActiveTab() { 49 | const tabs = await browser.tabs.query({ 50 | active: true, 51 | currentWindow: true, 52 | }); 53 | if (tabs[0] != null) { 54 | await this.moveTab(tabs[0]); 55 | } 56 | } 57 | 58 | private async moveTab(tab: Tab) { 59 | if (tab.id == null || tab.windowId == null) { 60 | return; 61 | } 62 | 63 | if (this.loadData != null) { 64 | this.originalTabInfoByTabWindowId = await this.loadData(); 65 | } 66 | 67 | const originalTabWindowId = this.tabWindowId(tab.id, tab.windowId); 68 | this.originalTabInfoByTabWindowId[originalTabWindowId] = { ...tab }; 69 | 70 | const allWindows = (await browser.windows.getAll()).filter( 71 | (window) => window.id != null && window.type === "normal" 72 | ); 73 | const currentTabWindowIndex = allWindows.findIndex((window) => window.id === tab.windowId); 74 | const targetWindowId = allWindows[(currentTabWindowIndex + 1) % allWindows.length]?.id; 75 | 76 | if (allWindows.length <= 1 || targetWindowId == null) { 77 | await this.tabMoveWrapper(tab, async () => { 78 | const targetWindow = await browser.windows.create({ tabId: tab.id }); 79 | // forcing as windows are always created with an id. 80 | return targetWindow.id as number; 81 | }); 82 | await this.complete(); 83 | return; 84 | } 85 | 86 | const wasOriginalTabActive = tab.active; 87 | const targetTabWindowId = this.tabWindowId(tab.id, targetWindowId); 88 | const targetIndex = this.originalTabInfoByTabWindowId[targetTabWindowId]?.index ?? -1; 89 | 90 | // typescript is losing results of null checks above for no reason, forcing them. 91 | await this.tabMoveWrapper(tab, async () => { 92 | await browser.tabs.move(tab.id as number, { 93 | windowId: targetWindowId, 94 | index: targetIndex, 95 | }); 96 | return targetWindowId as number; 97 | }); 98 | 99 | if (wasOriginalTabActive) { 100 | await browser.tabs.update(tab.id, { active: true }); 101 | await browser.windows.update(targetWindowId, { focused: true }); 102 | } 103 | 104 | await this.complete(); 105 | } 106 | 107 | private async complete() { 108 | await this.saveData(this.originalTabInfoByTabWindowId); 109 | } 110 | } 111 | --------------------------------------------------------------------------------