├── .gitignore
├── chrome
├── .gitignore
├── icon-128.png
├── icon-16.png
├── icon-48.png
├── content-script
│ ├── .babelrc
│ ├── webpack.config.js
│ ├── index.html
│ ├── src
│ │ ├── components
│ │ │ ├── TabList.jsx
│ │ │ ├── SearchBar.jsx
│ │ │ ├── TabListItem.jsx
│ │ │ └── App.jsx
│ │ └── ChromeController.js
│ ├── package.json
│ ├── index.js
│ ├── styles.css
│ └── yarn-error.log
├── archive.sh
├── manifest.json
└── event-page
│ ├── index.js
│ └── fuse.min.js
├── media
├── logo.png
└── screenshot.gif
└── readme.md
/.gitignore:
--------------------------------------------------------------------------------
1 | /chrome/content-script/bin
2 |
--------------------------------------------------------------------------------
/chrome/.gitignore:
--------------------------------------------------------------------------------
1 | *.zip
2 | node_modules
3 |
--------------------------------------------------------------------------------
/media/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ndethore/swoop/HEAD/media/logo.png
--------------------------------------------------------------------------------
/chrome/icon-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ndethore/swoop/HEAD/chrome/icon-128.png
--------------------------------------------------------------------------------
/chrome/icon-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ndethore/swoop/HEAD/chrome/icon-16.png
--------------------------------------------------------------------------------
/chrome/icon-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ndethore/swoop/HEAD/chrome/icon-48.png
--------------------------------------------------------------------------------
/media/screenshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ndethore/swoop/HEAD/media/screenshot.gif
--------------------------------------------------------------------------------
/chrome/content-script/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015"],
3 | "plugins": [
4 | ["transform-react-jsx", {
5 | "pragma": "m"
6 | }],
7 | "transform-class-properties"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/chrome/content-script/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = {
4 | entry: './index.js',
5 | output: {
6 | path: path.resolve(__dirname, './bin'),
7 | filename: 'app.js',
8 | },
9 | module: {
10 | rules: [{
11 | test: /\.(js|jsx)$/,
12 | exclude: /node_modules/,
13 | loader: 'babel-loader'
14 | }]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/chrome/archive.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | mkdir temp
4 | cp manifest.json temp/
5 | cp icon*.png temp/
6 |
7 | mkdir -p temp/content-script/bin
8 | cp content-script/styles.css temp/content-script/
9 | cp content-script/bin/app.js temp/content-script/bin/
10 |
11 | mkdir temp/event-page
12 | # to update when setting up event-page build
13 | cp event-page/fuse.min.js temp/event-page/
14 | cp event-page/index.js temp/event-page/
15 |
16 | zip -r archive temp
17 |
18 | rm -rf temp
19 |
--------------------------------------------------------------------------------
/chrome/content-script/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Swoop
11 |
12 |
13 |
14 | Amazing Website!
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/chrome/content-script/src/components/TabList.jsx:
--------------------------------------------------------------------------------
1 | var m = require("mithril");
2 |
3 | import TabListItem from './TabListItem.jsx';
4 |
5 | export default class TabList {
6 | constructor(vnode) {
7 |
8 | }
9 |
10 | view (vnode) {
11 | const tabs = vnode.attrs.tabs;
12 | const selectedIndex = vnode.attrs.selectedIndex;
13 |
14 | return (
15 |
16 | {
17 | tabs.map(function(tab, index) {
18 | const highlighted = (index === selectedIndex);
19 | return
20 | })
21 | }
22 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/chrome/content-script/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "swoop",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "Nicolas ",
6 | "license": "MIT",
7 | "dependencies": {
8 | "babel-core": "^6.26.0",
9 | "babel-loader": "^7.1.4",
10 | "babel-plugin-transform-react-jsx": "^6.24.1",
11 | "babel-preset-es2015": "^6.24.1",
12 | "mithril": "^1.1.6",
13 | "webpack": "^4.4.1"
14 | },
15 | "scripts": {
16 | "start": "webpack -d --watch",
17 | "build": "webpack -p"
18 | },
19 | "devDependencies": {
20 | "webpack-cli": "^2.0.13"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/chrome/content-script/index.js:
--------------------------------------------------------------------------------
1 | var m = require("mithril")
2 | import App from './src/components/App.jsx'
3 | import ChromeController from './src/ChromeController.js'
4 |
5 | var controller = new ChromeController();
6 | // controller.init();
7 | /*
8 | ** Render component in a placeholder div to avoid overriding
9 | ** existing DOM elements.
10 | */
11 | var slot = document.getElementById("swoop-slot");
12 | if (!slot) {
13 | slot = document.createElement("div");
14 | slot.setAttribute("id", "swoop-slot");
15 | document.body.appendChild(slot);
16 | }
17 |
18 | m.mount(slot, {view: function () {return m(App, {controller: controller})}})
19 |
--------------------------------------------------------------------------------
/chrome/content-script/src/components/SearchBar.jsx:
--------------------------------------------------------------------------------
1 | var m = require("mithril");
2 |
3 | export default class SearchBar {
4 | onupdate() {
5 | document.querySelector("#swoop #search input").focus();
6 | }
7 |
8 | view(vnode) {
9 | return (
10 |
11 |
12 |
13 |
14 | );
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/chrome/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Swoop! Beta",
3 | "version": "1.0.1",
4 | "version_name": "1.0 beta 2",
5 | "description": "Quickly search and navigate through your tabs.",
6 | "icons": {
7 | "16": "icon-16.png",
8 | "48": "icon-48.png",
9 | "128": "icon-128.png"
10 | },
11 | "manifest_version": 2,
12 | "background": {
13 | "scripts": ["event-page/fuse.min.js", "event-page/index.js"],
14 | "persistent": true
15 | },
16 | "content_scripts": [
17 | {
18 | "matches": [""],
19 | "css": ["content-script/styles.css"],
20 | "js": ["content-script/bin/app.js"]
21 | }
22 | ],
23 | "permissions": ["tabs", ""],
24 | "browser_action": {
25 | "default_icon": "icon-128.png"
26 | },
27 | "commands": {
28 | "toggle": {
29 | "suggested_key": {
30 | "default": "Ctrl+M",
31 | "mac": "Command+K"
32 | },
33 | "description": "Toggle switcher UI"
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/chrome/content-script/src/ChromeController.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | export default class ChromeController {
4 | constructor() {
5 | this.port = null;
6 | this.onShowCommand = null;
7 | this.onHideCommand = null;
8 | }
9 |
10 | search = (query) => {
11 | this.port.postMessage({command: "search", query: query});
12 | }
13 |
14 | open = (id) => {
15 | this.port.postMessage({command: "open", tabId: id});
16 | }
17 |
18 | onMessage = (message) => {
19 | console.log(`Command received from event page: ${message.command}`);
20 | switch (message.command) {
21 | case "show": {
22 | if (this.onShowCommand) this.onShowCommand(message.data);
23 | break;
24 | }
25 | case "hide": {
26 | if (this.onHideCommand) this.onHideCommand();
27 | break;
28 | }
29 | default: break;
30 |
31 | }
32 | }
33 |
34 | onDisconnect = () => {
35 | console.log("Port disconnected.");
36 | console.log(`Last Error: ${chrome.runtime.lastError}`);
37 | this.port = null;
38 | }
39 |
40 | onConnect = (port) => {
41 | console.log("Connection established...");
42 | this.port = port;
43 | this.port.onMessage.addListener(this.onMessage);
44 | this.port.onDisconnect.addListener(this.onDisconnect);
45 | }
46 |
47 | onHandshake = (message, sender, sendResponse) => {
48 | // Responding to probe from the extension to check if
49 | // a content script already exists on the page
50 | sendResponse("pong");
51 | }
52 |
53 | init() {
54 | console.log("Initializing...");
55 | chrome.runtime.onMessage.addListener(this.onHandshake);
56 | chrome.runtime.onConnect.addListener(this.onConnect);
57 | console.log("Ready!");
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/chrome/content-script/src/components/TabListItem.jsx:
--------------------------------------------------------------------------------
1 | var m = require("mithril");
2 |
3 | export default class TabListItem {
4 | constructor() {
5 |
6 | }
7 |
8 | matchForKey(key, matches) {
9 | if (matches) {
10 | for (let match of matches) {
11 | if (match.key == key) return match;
12 | }
13 | }
14 | return null;
15 | }
16 |
17 | highlight(text, indices, opening, closing) {
18 | var chunks = [];
19 |
20 | for (let indice of indices) {
21 | const start = indice[0];
22 | const end = indice[1];
23 |
24 | chunks.push({text: text.substr(0, start), highlight: false});
25 | chunks.push({text: text.substr(start, (end + 1) - start), highlight: true});
26 | text = text.substr(end + 1);
27 | }
28 | chunks.push({text: text, highlight: false});
29 |
30 | return (
31 |
32 | {
33 | chunks.map(function(chunk) {
34 | if (chunk.highlight) return {chunk.text};
35 | return {chunk.text};
36 | })
37 | }
38 |
39 | );
40 | }
41 |
42 | view (vnode) {
43 | const ui = vnode.state;
44 | const tab = vnode.attrs.tab;
45 | const favicon = tab.item.favIconUrl;
46 | const selected = vnode.attrs.highlighted;
47 | let title = tab.item.title;
48 | let url = tab.item.url;
49 | let match;
50 |
51 | if ((match = ui.matchForKey("title", tab.matches))) {
52 | title = ui.highlight(title, match.indices, , );
53 | }
54 | if ((match = ui.matchForKey("url", tab.matches))) {
55 | url = ui.highlight(url, match.indices, , );
56 | }
57 |
58 | return (
59 |
60 |
61 |
62 | {title}
63 | {url}
64 |
65 |
2 |
3 | The missing chrome extension for busy developers. Swoop brings modern code editor's quick open functionality to your browser.
4 |
5 |
6 | ## Install
7 |
8 | * [Chrome Extension](https://chrome.google.com/webstore/detail/swoop-beta/hnjjjkipglinhabedpmnbimjolifcihd)
9 | * Safari Extension (coming soon)
10 |
11 |
12 | ## How it works
13 | **Default Shortucts:**
14 | - Mac: Command ⌘ + K
15 | - Windows and Linux: Ctrl + M
16 | 
17 |
18 | ## Customization
19 |
20 | We're happy to receive suggestions and contributions, but be aware this is a highly opinionated project. There's a very high bar for adding options.
21 |
22 | This doesn't necessarily limit you from manually disabling functionality that is not useful for you. You can clone the repository, make the adjustments you need, and [load the unpacked extension in Chrome](https://developer.chrome.com/extensions/getstarted#unpacked), rather than installing from the Chrome Store.
23 |
24 | ## Contribute
25 |
26 | Suggestions and pull requests are highly encouraged!
27 |
28 | The extension has two main components:
29 | - an event page that holds the state and most of the logic.
30 | - a content script injected into each tabs individually, that act as a UI.
31 |
32 | In order to make modifications to the extension you'd need to run it locally.
33 |
34 | Please follow the below steps:
35 |
36 | ```
37 | git clone https://github.com/ndethore/swoop
38 | cd swoop/chrome/content-script
39 | npm install # Install dev dependencies
40 | npm run build # Build the extension code so it's ready for the browser
41 | npm run watch # Listen for file changes and automatically rebuild
42 | ```
43 |
44 | Once built, load it in the browser of your choice:
45 |
46 |
47 |
48 | | Chrome |
49 | Safari |
50 |
51 |
52 |
53 |
54 | - Open
chrome://extensions
55 | - Check the Developer mode checkbox
56 |
- Click on the Load unpacked extension button
57 |
- Select the folder
swoop/chrome
58 |
59 | |
60 |
61 | Coming soon
62 | |
63 |
64 |
65 |
66 |
67 | ## Maintainers
68 |
69 | * [Nicolas de Thore](https://github.com/ndethore)
70 |
71 |
72 | ## License
73 |
74 | [MIT](https://github.com/ndethore/swoop/blob/master/LICENSE)
75 |
76 | Copyright (c) 2018-present, Nicolas de Thoré.
77 |
--------------------------------------------------------------------------------
/chrome/content-script/src/components/App.jsx:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var m = require("mithril");
4 | import SearchBar from './SearchBar.jsx';
5 | import TabList from './TabList.jsx';
6 |
7 | export default class App {
8 | constructor(vnode) {
9 | console.log("Contructing app component...");
10 | this.tabs = [];
11 | this.input = "";
12 | this.visible = false;
13 | this.selectedIndex = -1;
14 | }
15 |
16 | /*
17 | ** Life Cycle Methods
18 | */
19 | oninit(vnode) {
20 | console.log(`Component created with attrs: ${vnode.attrs}`);
21 | }
22 |
23 | oncreate(vnode) {
24 | console.log("Initialized with height of: ", vnode.dom.offsetHeight);
25 | this.controller = vnode.attrs.controller;
26 | this.controller.onShowCommand = this.show;
27 | this.controller.onHideCommand = this.hide;
28 | this.controller.init();
29 | }
30 |
31 |
32 | /*
33 | ** Instance Methods
34 | */
35 | hide = () => {
36 | this.unlockBodyScroll();
37 | document.removeEventListener('keydown', this.onKeydown);
38 |
39 | this.visible = false;
40 |
41 | m.redraw();
42 | }
43 |
44 | show = (data) => {
45 | this.lockBodyScroll();
46 | document.addEventListener('keydown', this.onKeydown, false);
47 |
48 | const searching = this.input.length > 0;
49 | this.visible = true;
50 | this.tabs = JSON.parse(data);
51 | this.selectedIndex = searching? 0 : -1;
52 |
53 | m.redraw();
54 | }
55 |
56 | selectPrevious = () => {
57 | this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
58 | m.redraw();
59 | }
60 |
61 | selectNext = () => {
62 | this.selectedIndex = Math.min(this.selectedIndex + 1, this.tabs.length - 1);
63 | m.redraw();
64 | }
65 |
66 | lockBodyScroll() {
67 | document.body.classList.toggle("no-scroll", true);
68 | }
69 |
70 | unlockBodyScroll() {
71 | document.body.classList.toggle("no-scroll", false);
72 | }
73 |
74 |
75 | /*
76 | ** User Input Events
77 | */
78 | onKeydown = (event) => {
79 | console.log("Keydown!");
80 | /*
81 | ** Moved shortcut detection to browser level to avoid to avoid potential
82 | ** conflict with pre-existing web page's listeners.
83 | */
84 | switch (event.key) {
85 | case "Escape": this.hide(); break;
86 | case "ArrowUp": this.selectPrevious(); break;
87 | case "ArrowDown": this.selectNext(); break;
88 | case "Enter": this.controller.open(this.tabs[this.selectedIndex].item.id); break;
89 | default: break;
90 |
91 | }
92 | }
93 |
94 | onInput = (event) => {
95 | console.log(`New Input: ${event.target.value}`);
96 | if (this.input !== event.target.value) {
97 | this.input = event.target.value;
98 | this.controller.search(this.input);
99 | }
100 | }
101 |
102 | /*
103 | ** View
104 | */
105 | view(vnode) {
106 | const state = vnode.state;
107 | console.log("Rendering...");
108 | console.log(`visible: ${state.visible}`);
109 | return (
110 |
111 |
112 |
113 |
114 |
115 |