├── .gitignore
├── icon.png
├── options.js
├── manifest.json
├── options.html
├── background.js
├── readme.es.md
├── readme.md
├── icon.svg
├── options.css
├── templates.js
├── pwdmngr.css
└── pwdmngr.js
/.gitignore:
--------------------------------------------------------------------------------
1 | zip.sh
2 |
3 | *.zip
4 |
--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eusonlito/Password-Manager-Chrome/HEAD/icon.png
--------------------------------------------------------------------------------
/options.js:
--------------------------------------------------------------------------------
1 | const $save = document.getElementById('save');
2 |
3 | document.addEventListener('DOMContentLoaded', () => {
4 | chrome.storage.sync.get({ endpoint: '', key: '' }, items => {
5 | document.getElementById('endpoint').value = items.endpoint;
6 | document.getElementById('key').value = items.key;
7 | });
8 | });
9 |
10 | $save.addEventListener('click', () => {
11 | const endpoint = document.getElementById('endpoint').value.replace(/\/*$/, '');
12 | const key = document.getElementById('key').value;
13 |
14 | chrome.storage.sync.set({ endpoint: endpoint, key: key }, () => {
15 | $save.classList.add('success');
16 | setTimeout(() => $save.classList.remove('success'), 1000);
17 | });
18 | });
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "EuSonLito - Password Manager",
3 | "description": "Easy Connect from Chrome with your own Password Manager Platform",
4 | "version": "0.0.2",
5 | "manifest_version": 3,
6 | "author": "Lito",
7 | "icons": {
8 | "128": "icon.png"
9 | },
10 | "action": {
11 | "default_title": "Password Manager",
12 | "default_icon": "icon.png"
13 | },
14 | "background": {
15 | "service_worker": "background.js"
16 | },
17 | "options_ui": {
18 | "page": "options.html",
19 | "open_in_tab": false
20 | },
21 | "permissions": [
22 | "activeTab",
23 | "tabs",
24 | "scripting",
25 | "storage"
26 | ],
27 | "host_permissions": [
28 | "http://*/*",
29 | "https://*/*"
30 | ]
31 | }
32 |
--------------------------------------------------------------------------------
/options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
1 | const MSG_INIT = 'init';
2 | const MSG_ERROR = 'error';
3 |
4 | let endpoint, key;
5 |
6 | function sendMessage(action, content) {
7 | return chrome.tabs.query({ active: true, lastFocusedWindow: true }, async tabs => {
8 | return chrome.tabs.sendMessage(tabs[0].id, { action: action, content: content });
9 | });
10 | }
11 |
12 | async function storage() {
13 | return new Promise(function(resolve, reject) {
14 | return chrome.storage.sync.get({ endpoint: null, key: null }, async items => {
15 | endpoint = items.endpoint;
16 | key = items.key;
17 |
18 | return resolve();
19 | });
20 | });
21 | }
22 |
23 | async function load(tab) {
24 | await chrome.scripting.insertCSS({
25 | target: { tabId: tab.id },
26 | files: ['pwdmngr.css']
27 | }).catch(error => console.log(error));
28 |
29 | await chrome.scripting.executeScript({
30 | target: { tabId: tab.id },
31 | files: ['templates.js']
32 | }).catch(error => console.log(error));
33 |
34 | await chrome.scripting.executeScript({
35 | target: { tabId: tab.id },
36 | files: ['pwdmngr.js']
37 | }).catch(error => console.log(error));
38 |
39 | await storage();
40 | }
41 |
42 | chrome.action.onClicked.addListener(async (tab) => {
43 | await load(tab);
44 |
45 | if (!endpoint || !key) {
46 | return sendMessage(MSG_ERROR, 'API KEY is not configured.
Go to Extensions → Settings → Options');
47 | }
48 |
49 | sendMessage(MSG_INIT, { endpoint: endpoint, apikey: key, url: tab.url });
50 | });
51 |
--------------------------------------------------------------------------------
/readme.es.md:
--------------------------------------------------------------------------------
1 | [English](readme.md)
2 |
3 | ### Extensión de Google Chrome para el Gestor de Contraseñas
4 |
5 | Publicada como Extensión en la Chrome Web Store: https://chrome.google.com/webstore/detail/eusonlito-password-manage/mkbgfbjaoibojobjpimpkaofckkgknhi
6 |
7 | Esta extensión se conecta a la aplicación https://github.com/eusonlito/Password-Manager para permitir el acceso a contraseñas directamente desde cualquier sitio web.
8 |
9 | Se debe instalar desde el modo desarrollador, ya que no está publicada en el store de extensiones de Chrome.
10 |
11 | 1. Clonamos el repositorio de Github en un directorio local:
12 |
13 | ```bash
14 | git clone https://github.com/eusonlito/Password-Manager-Chrome.git
15 | ```
16 |
17 | 2. Vamos a la opción de Chrome `Menú` > `Mas Herramientas` > `Extensiones`
18 |
19 | 3. Arriba a la derecha activamos la opción de `Modo Desarrollador`
20 |
21 | 4. Accedemos al nuevo botón de `Cargar Descomprimida`
22 |
23 | 5. Seleccionamos el directorio que acabamos de clonar.
24 |
25 | 6. En `Endpoint` indicamos la raíz de la web donde tenemos instalado el gestor de contraseñas, por ejemplo `https://password.domain.com`
26 |
27 | 7. En `API KEY` pegamos la API KEY que podemos generar desde nuestro perfil del gestor de contraseñas.
28 |
29 | 8. Guardamos y probamos a pulsar el botón de la aplicación en cualquier web que tengamos dada de alta en el gestor de contraseñas.
30 |
31 | ### Capturas
32 |
33 | 
34 |
35 | 
36 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | [Spanish](readme.es.md)
2 |
3 | ### Google Chrome Extension for Password Manager
4 |
5 | Published as Extension in Chrome Web Store: https://chrome.google.com/webstore/detail/eusonlito-password-manage/mkbgfbjaoibojobjpimpkaofckkgknhi
6 |
7 | This extension connects to the application https://github.com/eusonlito/Password-Manager to allow access to passwords directly from any website.
8 |
9 | It must be installed from developer mode, as it is not published in the Chrome extensions store.
10 |
11 | 1. Clone the Github repository in a local directory:
12 |
13 | ```bash
14 | git clone https://github.com/eusonlito/Password-Manager-Chrome.git
15 | ```
16 |
17 | 2. Go to the Chrome option `Menu`>` More Tools`> `Extensions`
18 |
19 | 3. At the top right Activate the option of `Developer Mode`
20 |
21 | 4. Access the new button `Load Unpacked`
22 |
23 | 5. Select the directory that you have just cloned.
24 |
25 | 6. In `Endpoint` indicate the root of the web where you have installed the password manager, for example `https://password.domain.com`
26 |
27 | 7. In `API KEY` paste the API KEY that you can generate from your password manager profile.
28 |
29 | 8. Save and try to press the application button on any website that you have registered in the password manager.
30 |
31 | ### API KEY Secret
32 |
33 | If you have configured the API with `auth.api.secret_enabled` you need to fill the `API KEY Secret` on every IP change.
34 |
35 | ### Screenshots
36 |
37 | 
38 |
39 | 
40 |
--------------------------------------------------------------------------------
/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/options.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-size: 16px;
6 | }
7 |
8 | body {
9 | font-family: 'Roboto', sans-serif;
10 | background-color: white;
11 | -webkit-text-size-adjust: 100%;
12 | -webkit-font-smoothing: antialiased;
13 | width: 500px;
14 | padding: 0 20px 20px 20px;
15 | overflow: hidden;
16 | }
17 |
18 | a {
19 | text-decoration: none;
20 | }
21 |
22 | .input-group {
23 | position: relative;
24 | width: 100%;
25 | border-radius: 3px;
26 | overflow: hidden;
27 | }
28 |
29 | .input-group label {
30 | position: absolute;
31 | top: 20px;
32 | left: 12px;
33 | color: rgba(0, 0, 0, 0.5);
34 | font-weight: 500;
35 | transform-origin: 0 0;
36 | transform: translate3d(0, 0, 0);
37 | transition: all 0.2s ease;
38 | pointer-events: none;
39 | }
40 |
41 | .input-group input {
42 | -webkit-appearance: none;
43 | -moz-appearance: none;
44 | appearance: none;
45 | width: 100%;
46 | border: 0;
47 | font-family: inherit;
48 | padding: 16px 12px 0 12px;
49 | height: 56px;
50 | font-weight: 400;
51 | background: rgba(0, 0, 0, 0.02);
52 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
53 | color: #000;
54 | transition: all 0.15s ease;
55 | }
56 |
57 | .input-group input:hover {
58 | background: rgba(0, 0, 0, 0.04);
59 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
60 | }
61 |
62 | .input-group input:not(:-moz-placeholder-shown) + label {
63 | color: rgba(0, 0, 0, 0.5);
64 | transform: translate3d(0, -12px, 0) scale(0.75);
65 | }
66 |
67 | .input-group input:not(:-ms-input-placeholder) + label {
68 | color: rgba(0, 0, 0, 0.5);
69 | transform: translate3d(0, -12px, 0) scale(0.75);
70 | }
71 |
72 | .input-group input:not(:placeholder-shown) + label {
73 | color: rgba(0, 0, 0, 0.5);
74 | transform: translate3d(0, -12px, 0) scale(0.75);
75 | }
76 |
77 | .input-group input:focus {
78 | background: rgba(0, 0, 0, 0.05);
79 | outline: none;
80 | box-shadow: inset 0 -2px 0 #3369ff;
81 | }
82 |
83 | .input-group input:focus + label {
84 | color: #3369ff;
85 | transform: translate3d(0, -12px, 0) scale(0.75);
86 | }
87 |
88 | .submit {
89 | display: inline-block;
90 | padding: 0.8em 1.4em;
91 | margin: 0 0.3em 0.3em 0;
92 | border-radius: 0.15em;
93 | box-sizing: border-box;
94 | font-weight: 600;
95 | color: #FFFFFF;
96 | background-color: #3369ff;
97 | box-shadow: inset 0 -0.55em 0 -0.35em rgba(0, 0, 0, 0.17);
98 | text-align: center;
99 | border: none;
100 | cursor: pointer;
101 | }
102 |
103 | .submit:active {
104 | top: 0.1em;
105 | }
106 |
107 | .button-list {
108 | border: 0;
109 | background-color: transparent;
110 | color: #666;
111 | cursor: pointer;
112 | font-size: 1rem;
113 | line-height: 1;
114 | padding: 0.5em;
115 | text-decoration: none;
116 | transition: all 300ms ease;
117 | }
118 |
119 | .button-list:hover {
120 | color: #fff;
121 | outline: 0;
122 | background-color: #999;
123 | }
124 |
125 | table {
126 | width: 100%;
127 | border-spacing: 0;
128 | border-collapse: collapse;
129 | }
130 |
131 | table th {
132 | text-align: left;
133 | padding: 5px 0;
134 | }
135 |
136 | table td {
137 | padding: 5px 0;
138 | }
139 |
140 | .success {
141 | color: green;
142 | }
143 |
144 | button.success {
145 | background-color: green;
146 | color: white;
147 | }
148 |
149 | .error {
150 | color: red;
151 | }
152 |
153 | button.error {
154 | background-color: red;
155 | color: white;
156 | }
157 |
158 | .pb-20 {
159 | padding-bottom: 20px;
160 | }
161 |
162 | .m-10 {
163 | margin: 10px;
164 | }
165 |
166 | .mb-5 {
167 | margin-bottom: 5px;
168 | }
169 |
170 | .mb-20 {
171 | margin-bottom: 20px;
172 | }
173 |
174 | .my-10 {
175 | margin-top: 10px;
176 | margin-bottom: 10px;
177 | }
178 |
179 | .block {
180 | display: block;
181 | }
182 |
183 | .w-full {
184 | width: 100%;
185 | }
186 |
187 | .bold {
188 | font-weight: 700;
189 | }
190 |
191 | .text-center {
192 | text-align: center;
193 | }
194 |
195 | .hidden {
196 | display: none;
197 | }
198 |
--------------------------------------------------------------------------------
/templates.js:
--------------------------------------------------------------------------------
1 | function pwdmngrTemplates(name) {
2 | switch (name) {
3 | case 'MODAL':
4 | return `
5 |
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
...
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 |
77 | ${ iconTPL }
78 | ${ message }
79 |
80 | `;
81 | };
82 |
83 | this.showCredentialList = function(credentialList) {
84 | this.log('[password-manager] Showing User List', credentialList);
85 |
86 | this.$content().innerHTML = `
87 | `
88 | + this.showCredentialListHeader()
89 | + credentialList.map(item => this.showCredentialListItem(item)).join('')
90 | + `
`;
91 |
92 | this.$content().querySelectorAll('[data-credential]').forEach(item => {
93 | item.addEventListener('click', () => this.copy(item));
94 | });
95 | };
96 |
97 | this.showCredentialListHeader = function() {
98 | return ``
99 | + `CREDENTIAL`
100 | + `USER`
101 | + `PASSWORD`
102 | + ``;
103 | };
104 |
105 | this.showCredentialListItem = function(item) {
106 | return ``
107 | + `${ item.name }`
108 | + `${ pwdmngrTemplates('ICON_COPY') }`
109 | + `${ pwdmngrTemplates('ICON_COPY') }`
110 | + ``
111 | };
112 |
113 | this.showApiSecret = function(item) {
114 | this.$search().classList.add('pwdmngr-modal__hidden');
115 | this.$content().classList.add('pwdmngr-modal__hidden');
116 | this.$apiSecret().classList.remove('pwdmngr-modal__hidden');
117 | };
118 |
119 | this.apiSecretInput = function(e) {
120 | e.preventDefault();
121 |
122 | const value = this.$apiSecretInput().value;
123 |
124 | if (!value.length) {
125 | return;
126 | }
127 |
128 | if ((e.code !== 'Enter') && (e.code !== 'NumpadEnter')) {
129 | return;
130 | }
131 |
132 | this.$apiSecret().classList.add('pwdmngr-modal__hidden');
133 | this.$content().classList.remove('pwdmngr-modal__hidden');
134 |
135 | this.apiSearch({
136 | api_secret: value,
137 | q: this.URL
138 | });
139 | };
140 |
141 | this.request = async function(url, body) {
142 | this.log('[password-manager] requesting Data');
143 |
144 | const response = await fetch(url, {
145 | method: 'POST',
146 | headers: {
147 | 'Content-Type': 'application/json',
148 | 'Accept': 'application/json',
149 | 'Authorization': this.APIKEY
150 | },
151 | body: JSON.stringify(body)
152 | });
153 |
154 | const text = await response.text();
155 | let data;
156 |
157 | try {
158 | data = JSON.parse(text);
159 | } catch (e) {
160 | return this.showError('Can not load url ' + url + ': ' + text, this.ICON_WARNING);
161 | }
162 |
163 | if (response.ok) {
164 | return data;
165 | }
166 |
167 | if (data.status === 'api_secret_required') {
168 | return this.showApiSecret();
169 | }
170 |
171 | return this.showError('Can not load url ' + url + ': ' + data.message + '', this.ICON_WARNING);
172 | };
173 |
174 | this.apiSearch = async function(query) {
175 | this.log('[password-manager] Checking credentials...');
176 |
177 | if (typeof query === 'string') {
178 | query = { q: query };
179 | }
180 |
181 | const data = await this.request(this.ENDPOINT + '/app/api/search', query);
182 |
183 | if (!data) {
184 | return;
185 | }
186 |
187 | if (!data.length) {
188 | return this.showError(`No results, but you can add them through WEB PANEL.`, this.ICON_NO_RESULTS)
189 | }
190 |
191 | this.showCredentialList(data);
192 | };
193 |
194 | this.searchUrl = function() {
195 | this.apiSearch(this.URL);
196 | };
197 |
198 | this.searchInput = function(e) {
199 | const value = this.$searchInput().value;
200 |
201 | if (e.code === 'Escape') {
202 | return this.apiSearch(this.URL);
203 | }
204 |
205 | if ((e.code !== 'Enter') && (e.code !== 'NumpadEnter')) {
206 | return;
207 | }
208 |
209 | e.preventDefault();
210 |
211 | if (!value.length) {
212 | return this.apiSearch(this.URL);
213 | }
214 |
215 | this.apiSearch(value);
216 | };
217 |
218 | this.clipboard = function(text) {
219 | const element = document.createElement('textarea');
220 |
221 | element.style = 'position: absolute; width: 1px; height: 1px; left: -10px; top: -10px';
222 | element.value = text;
223 |
224 | document.body.appendChild(element);
225 |
226 | element.select();
227 | element.setSelectionRange(0, 99999);
228 |
229 | document.execCommand('copy');
230 |
231 | document.body.removeChild(element);
232 | };
233 |
234 | this.copy = async function(el) {
235 | const data = await this.request(this.ENDPOINT + '/app/api/' + el.dataset.credentialId + '/payload/' + el.dataset.credentialType);
236 |
237 | if (!data) {
238 | return;
239 | }
240 |
241 | this.clipboard(this.decode(data.value));
242 |
243 | el.firstElementChild.classList.add('active');
244 |
245 | setTimeout(() => el.firstElementChild.classList.remove('active'), 1000);
246 | };
247 |
248 | this.decode = function(encoded) {
249 | const hex = atob(encoded).split('\\x');
250 | let decoded = '';
251 |
252 | for (let i = 0; i < hex.length; i++) {
253 | decoded += this.hex2char(hex[i]);
254 | }
255 |
256 | return decoded;
257 | }
258 |
259 | this.hex2char = function(hex) {
260 | const groups = hex.match(/[\s\S]{2}/g) || [];
261 | let char = '';
262 |
263 | for (var i = 0, j = groups.length; i < j; i++) {
264 | char += '%' + ('0' + groups[i]).slice(-2);
265 | }
266 |
267 | return decodeURIComponent(char);
268 | }
269 |
270 | this.close = function() {
271 | if (!this.$modal()) {
272 | return;
273 | }
274 |
275 | this.$closeBtn().removeEventListener('click', e => this.close());
276 |
277 | this.$modal().parentElement.removeChild(this.$modal());
278 | };
279 |
280 | this.drag = function() {
281 | const $modal = this.$modal();
282 | const $header = this.$header();
283 |
284 | $header.onmousedown = () => this.dragStart($modal);
285 | $header.onmouseup = (e) => this.dragEnd();
286 |
287 | window.onmousemove = (e) => this.dragMove($modal, e);
288 |
289 | window.addEventListener('selectstart', this.dragTextSelect);
290 | };
291 |
292 | this.dragStart = function($modal) {
293 | this.DRAG = true;
294 |
295 | this.ELEMENT_X = this.POSITION_X - $modal.offsetLeft;
296 | this.ELEMENT_Y = this.POSITION_Y - $modal.offsetTop;
297 | };
298 |
299 | this.dragMove = function($modal, e) {
300 | this.POSITION_X = e.clientX;
301 | this.POSITION_Y = e.clientY;
302 |
303 | if (!this.DRAG) {
304 | return;
305 | }
306 |
307 | $modal.style.left = (this.POSITION_X - this.ELEMENT_X) + 'px';
308 | $modal.style.top = (this.POSITION_Y - this.ELEMENT_Y) + 'px';
309 | };
310 |
311 | this.dragEnd = function() {
312 | this.DRAG = false;
313 | };
314 |
315 | this.dragTextSelect = function(e) {
316 | if (this.DRAG) {
317 | e.preventDefault();
318 | }
319 | };
320 |
321 | this.createModal = function() {
322 | if (document.getElementById('js-pwdmngr-modal')) {
323 | return;
324 | }
325 |
326 | document.body.insertAdjacentHTML('beforeend', pwdmngrTemplates('MODAL'));
327 |
328 | this.drag();
329 |
330 | this.$closeBtn().addEventListener('click', e => this.close());
331 |
332 | this.$searchInput().addEventListener('input', e => this.searchInput(e));
333 | this.$searchInput().addEventListener('keyup', e => this.searchInput(e));
334 |
335 | this.$apiSecretInput().addEventListener('keyup', e => this.apiSecretInput(e));
336 |
337 | this.$content().innerHTML = `${ pwdmngrTemplates('PRELOADER') }
`;
338 | };
339 |
340 | this.setConfig = function(data) {
341 | this.ENDPOINT = data.endpoint;
342 | this.APIKEY = data.apikey;
343 | this.URL = data.url;
344 |
345 | document.getElementById('js-pwdmngr-webpanel').href = this.ENDPOINT;
346 |
347 | this.log('[password-manager] Setting Configuration');
348 | this.log('[password-manager] ENDPOINT', this.ENDPOINT);
349 | this.log('[password-manager] APIKEY', this.APIKEY);
350 | this.log('[password-manager] URL', this.URL);
351 | };
352 |
353 | this.init = function() {
354 | chrome.runtime.onMessage.addListener(this.initListener);
355 |
356 | this.log('[password-manager] Injected script NEW.');
357 | }
358 |
359 | this.initListener = function(request) {
360 | if (this.$modal()) {
361 | return;
362 | }
363 |
364 | this.log('[password-manager] request.action', request.action);
365 |
366 | this.createModal();
367 |
368 | switch (request.action) {
369 | case 'init':
370 | this.setConfig(request.content);
371 | this.searchUrl();
372 | break;
373 |
374 | case 'error':
375 | this.showError(request.content, this.ICON_APIKEY);
376 | break;
377 | }
378 | }
379 |
380 | this.init();
381 | })();
382 |
--------------------------------------------------------------------------------