feat: adding language options

Now the user can add some language options for the context menu
shortcuts.

src/background.js

@@ -1,17 +1,57 @@
-// Add context menu
+chrome.runtime.onMessage.addListener((opt) => {
-function setupContextMenu() {
+    if (opt.name === 'reloadContextMenus') {
+        setupContextMenu();
+    }
+});
+
+async function setupContextMenu() {
+    await chrome.contextMenus.removeAll();
+    option = await chrome.storage.sync.get(['last', 'ptb', 'enu', 'deu', 'ita', 'esp', 'fra']);
+
+    // If no option selected, default to last one
+    if (!option.ptb && !option.enu && !option.deu && !option.ita && !option.esp && !option.fra) {
+        option.last = true;
+    }
+
+    if (option.last) {
+        addContextMenu("", "last");
+    }
+    if (option.ptb) {
+        addContextMenu(" em PTB", "ptb");
+    }
+    if (option.enu) {
+        addContextMenu(" em ENU", "enu");
+    }
+    if (option.deu) {
+        addContextMenu(" em DEU", "deu");
+    }
+    if (option.ita) {
+        addContextMenu(" em ITA", "ita");
+    }
+    if (option.esp) {
+        addContextMenu(" em ESP", "esp");
+    }
+    if (option.fra) {
+        addContextMenu(" em FRA", "fra");
+    }
+}
+setupContextMenu();
+
+function addContextMenu(label, languageId) {
     chrome.contextMenus.create({ 
-        title: 'Search: %s', 
+        title: 'Pesquisar' + label + ': %s', 
         contexts: ['selection'],
-        id: 'define-word',
+        id: languageId,
     });
 }
 
-setupContextMenu();
 
 // Context menu was clicked...
 chrome.contextMenus.onClicked.addListener((info) => {
     selectedWord = info.selectionText;
+    if (info.menuItemId != "last") {
+        selectedWord = info.menuItemId + "/" + selectedWord;
+    }
     url = "https://dicionarios.cc/" + selectedWord
 
     chrome.tabs.create({ url: url});

src/light.css

@@ -0,0 +1,886 @@
+/**
+ * Forced light theme version
+ */
+
+:root {
+  --background-body: #fff;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
+  --selection: #9e9e9e;
+  --text-main: #363636;
+  --text-bright: #000;
+  --text-muted: #70777f;
+  --links: #0076d1;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #000;
+  --animation-duration: 0.1s;
+  --button-base: #d0cfcf;
+  --button-hover: #9b9b9b;
+  --scrollbar-thumb: rgb(170, 170, 170);
+  --scrollbar-thumb-hover: var(--button-hover);
+  --form-placeholder: #949494;
+  --form-text: #1d1d1d;
+  --variable: #39a33c;
+  --highlight: #ff0;
+  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
+}
+
+html {
+  scrollbar-color: rgb(170, 170, 170) #fff;
+  scrollbar-color: var(--scrollbar-thumb) var(--background-body);
+  scrollbar-width: thin;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
+  line-height: 1.4;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  word-wrap: break-word;
+  color: #363636;
+  color: var(--text-main);
+  background: #fff;
+  background: var(--background-body);
+  text-rendering: optimizeLegibility;
+}
+
+button {
+  transition:
+    background-color 0.1s linear,
+    border-color 0.1s linear,
+    color 0.1s linear,
+    box-shadow 0.1s linear,
+    transform 0.1s ease;
+  transition:
+    background-color var(--animation-duration) linear,
+    border-color var(--animation-duration) linear,
+    color var(--animation-duration) linear,
+    box-shadow var(--animation-duration) linear,
+    transform var(--animation-duration) ease;
+}
+
+input {
+  transition:
+    background-color 0.1s linear,
+    border-color 0.1s linear,
+    color 0.1s linear,
+    box-shadow 0.1s linear,
+    transform 0.1s ease;
+  transition:
+    background-color var(--animation-duration) linear,
+    border-color var(--animation-duration) linear,
+    color var(--animation-duration) linear,
+    box-shadow var(--animation-duration) linear,
+    transform var(--animation-duration) ease;
+}
+
+textarea {
+  transition:
+    background-color 0.1s linear,
+    border-color 0.1s linear,
+    color 0.1s linear,
+    box-shadow 0.1s linear,
+    transform 0.1s ease;
+  transition:
+    background-color var(--animation-duration) linear,
+    border-color var(--animation-duration) linear,
+    color var(--animation-duration) linear,
+    box-shadow var(--animation-duration) linear,
+    transform var(--animation-duration) ease;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 12px;
+  margin-top: 24px;
+}
+
+h1 {
+  color: #000;
+  color: var(--text-bright);
+}
+
+h2 {
+  color: #000;
+  color: var(--text-bright);
+}
+
+h3 {
+  color: #000;
+  color: var(--text-bright);
+}
+
+h4 {
+  color: #000;
+  color: var(--text-bright);
+}
+
+h5 {
+  color: #000;
+  color: var(--text-bright);
+}
+
+h6 {
+  color: #000;
+  color: var(--text-bright);
+}
+
+strong {
+  color: #000;
+  color: var(--text-bright);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+q::before {
+  content: none;
+}
+
+q::after {
+  content: none;
+}
+
+blockquote {
+  border-left: 4px solid #0096bfab;
+  border-left: 4px solid var(--focus);
+  margin: 1.5em 0;
+  padding: 0.5em 1em;
+  font-style: italic;
+}
+
+q {
+  border-left: 4px solid #0096bfab;
+  border-left: 4px solid var(--focus);
+  margin: 1.5em 0;
+  padding: 0.5em 1em;
+  font-style: italic;
+}
+
+blockquote > footer {
+  font-style: normal;
+  border: 0;
+}
+
+blockquote cite {
+  font-style: normal;
+}
+
+address {
+  font-style: normal;
+}
+
+a[href^='mailto\:']::before {
+  content: '📧 ';
+}
+
+a[href^='tel\:']::before {
+  content: '📞 ';
+}
+
+a[href^='sms\:']::before {
+  content: '💬 ';
+}
+
+mark {
+  background-color: #ff0;
+  background-color: var(--highlight);
+  border-radius: 2px;
+  padding: 0 2px 0 2px;
+  color: #000;
+}
+
+a > code,
+a > strong {
+  color: inherit;
+}
+
+button,
+select,
+input[type='submit'],
+input[type='reset'],
+input[type='button'],
+input[type='checkbox'],
+input[type='range'],
+input[type='radio'] {
+  cursor: pointer;
+}
+
+input,
+select {
+  display: block;
+}
+
+[type='checkbox'],
+[type='radio'] {
+  display: initial;
+}
+
+input {
+  color: #1d1d1d;
+  color: var(--form-text);
+  background-color: #efefef;
+  background-color: var(--background);
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+button {
+  color: #1d1d1d;
+  color: var(--form-text);
+  background-color: #efefef;
+  background-color: var(--background);
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+textarea {
+  color: #1d1d1d;
+  color: var(--form-text);
+  background-color: #efefef;
+  background-color: var(--background);
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+select {
+  color: #1d1d1d;
+  color: var(--form-text);
+  background-color: #efefef;
+  background-color: var(--background);
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+button {
+  background-color: #d0cfcf;
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+input[type='submit'] {
+  background-color: #d0cfcf;
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+input[type='reset'] {
+  background-color: #d0cfcf;
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+input[type='button'] {
+  background-color: #d0cfcf;
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+button:hover {
+  background: #9b9b9b;
+  background: var(--button-hover);
+}
+
+input[type='submit']:hover {
+  background: #9b9b9b;
+  background: var(--button-hover);
+}
+
+input[type='reset']:hover {
+  background: #9b9b9b;
+  background: var(--button-hover);
+}
+
+input[type='button']:hover {
+  background: #9b9b9b;
+  background: var(--button-hover);
+}
+
+input[type='color'] {
+  min-height: 2rem;
+  padding: 8px;
+  cursor: pointer;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  height: 1em;
+  width: 1em;
+}
+
+input[type='radio'] {
+  border-radius: 100%;
+}
+
+input {
+  vertical-align: top;
+}
+
+label {
+  vertical-align: middle;
+  margin-bottom: 4px;
+  display: inline-block;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+select,
+button,
+textarea {
+  -webkit-appearance: none;
+}
+
+textarea {
+  display: block;
+  margin-right: 0;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+textarea:not([cols]) {
+  width: 100%;
+}
+
+textarea:not([rows]) {
+  min-height: 40px;
+  height: 140px;
+}
+
+select {
+  background: #efefef url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat;
+  background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
+  padding-right: 35px;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
+input:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+  box-shadow: 0 0 0 2px var(--focus);
+}
+
+select:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+  box-shadow: 0 0 0 2px var(--focus);
+}
+
+button:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+  box-shadow: 0 0 0 2px var(--focus);
+}
+
+textarea:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+  box-shadow: 0 0 0 2px var(--focus);
+}
+
+input[type='checkbox']:active,
+input[type='radio']:active,
+input[type='submit']:active,
+input[type='reset']:active,
+input[type='button']:active,
+input[type='range']:active,
+button:active {
+  transform: translateY(2px);
+}
+
+input:disabled,
+select:disabled,
+button:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+::-moz-placeholder {
+  color: #949494;
+  color: var(--form-placeholder);
+}
+
+:-ms-input-placeholder {
+  color: #949494;
+  color: var(--form-placeholder);
+}
+
+::-ms-input-placeholder {
+  color: #949494;
+  color: var(--form-placeholder);
+}
+
+::placeholder {
+  color: #949494;
+  color: var(--form-placeholder);
+}
+
+fieldset {
+  border: 1px #0096bfab solid;
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 12px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  background: #efefef;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: #efefef;
+  background: var(--background);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  -moz-transition: 0.2s;
+  transition: 0.2s;
+  background: #efefef;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+  background: var(--border);
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: #efefef;
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: #efefef;
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  border: 1px solid #000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+  background: var(--border);
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: #efefef;
+  background: var(--background);
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: #efefef;
+  background: var(--background);
+}
+
+a {
+  text-decoration: none;
+  color: #0076d1;
+  color: var(--links);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background: #efefef;
+  background: var(--background);
+  color: #000;
+  color: var(--code);
+  padding: 2.5px 5px;
+  border-radius: 6px;
+  font-size: 1em;
+}
+
+samp {
+  background: #efefef;
+  background: var(--background);
+  color: #000;
+  color: var(--code);
+  padding: 2.5px 5px;
+  border-radius: 6px;
+  font-size: 1em;
+}
+
+time {
+  background: #efefef;
+  background: var(--background);
+  color: #000;
+  color: var(--code);
+  padding: 2.5px 5px;
+  border-radius: 6px;
+  font-size: 1em;
+}
+
+pre > code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto;
+}
+
+var {
+  color: #39a33c;
+  color: var(--variable);
+  font-style: normal;
+  font-family: monospace;
+}
+
+kbd {
+  background: #efefef;
+  background: var(--background);
+  border: 1px solid #dbdbdb;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: #363636;
+  color: var(--text-main);
+  padding: 2px 4px 2px 4px;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border);
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+  table-layout: fixed;
+}
+
+table caption {
+  text-align: left;
+}
+
+td,
+th {
+  padding: 6px;
+  text-align: left;
+  vertical-align: top;
+  word-wrap: break-word;
+}
+
+thead {
+  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid var(--border);
+}
+
+tfoot {
+  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border);
+}
+
+tbody tr:nth-child(even) {
+  background-color: #efefef;
+  background-color: var(--background);
+}
+
+tbody tr:nth-child(even) button {
+  background-color: #f7f7f7;
+  background-color: var(--background-alt);
+}
+
+tbody tr:nth-child(even) button:hover {
+  background-color: #fff;
+  background-color: var(--background-body);
+}
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #efefef;
+  background: var(--background);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgb(170, 170, 170);
+  background: var(--scrollbar-thumb);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #9b9b9b;
+  background: var(--scrollbar-thumb-hover);
+}
+
+::-moz-selection {
+  background-color: #9e9e9e;
+  background-color: var(--selection);
+  color: #000;
+  color: var(--text-bright);
+}
+
+::selection {
+  background-color: #9e9e9e;
+  background-color: var(--selection);
+  color: #000;
+  color: var(--text-bright);
+}
+
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: #f7f7f7;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: #efefef;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+  cursor: pointer;
+  outline: none;
+}
+
+summary:hover,
+summary:focus {
+  text-decoration: underline;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: #363636;
+  color: var(--text-main);
+}
+
+dialog {
+  background-color: #f7f7f7;
+  background-color: var(--background-alt);
+  color: #363636;
+  color: var(--text-main);
+  border: none;
+  border-radius: 6px;
+  border-color: #dbdbdb;
+  border-color: var(--border);
+  padding: 10px 30px;
+}
+
+dialog > header:first-child {
+  background-color: #efefef;
+  background-color: var(--background);
+  border-radius: 6px 6px 0 0;
+  margin: -10px -30px 10px;
+  padding: 10px;
+  text-align: center;
+}
+
+dialog::-webkit-backdrop {
+  background: #0000009c;
+  -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
+}
+
+dialog::backdrop {
+  background: #0000009c;
+  -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
+}
+
+footer {
+  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+  color: #70777f;
+  color: var(--text-muted);
+}
+
+body > footer {
+  margin-top: 40px;
+}
+
+@media print {
+  body,
+  pre,
+  code,
+  summary,
+  details,
+  button,
+  input,
+  textarea {
+    background-color: #fff;
+  }
+
+  button,
+  input,
+  textarea {
+    border: 1px solid #000;
+  }
+
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  pre,
+  code,
+  button,
+  input,
+  textarea,
+  footer,
+  summary,
+  strong {
+    color: #000;
+  }
+
+  summary::marker {
+    color: #000;
+  }
+
+  summary::-webkit-details-marker {
+    color: #000;
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+
+  a {
+    color: #00f;
+    text-decoration: underline;
+  }
+}

src/manifest_all.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "Dicionarios.cc",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "An easy shortcut to Dicionarios.cc",
     "icons": {
         "16": "img/logo-16.png",
@@ -15,8 +15,12 @@
         "scripts": ["background.js"]<</firefox>><<chrome>>
         "service_worker": "background.js"<</chrome>>
     },
+    "options_ui": {
+        "page": "options.html"
+    },
     "permissions": [
-        "contextMenus"
+        "contextMenus",
+        "storage"
     ]<<firefox>>,
     "action": {
         "default_title": "Dicionarios.cc",

src/options.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="light.css" rel="stylesheet">
+  </head>
+
+<body style="height: 100%;">
+  <p>Exibir atalhos para os seguintes idiomas:</p>
+  <form>
+      <div>
+      <input type="checkbox" id="last">
+      <label for="last">Nenhum (abre no último usado)</label>
+      </div>
+
+      <div>
+      <input type="checkbox" id="ptb">
+      <label for="ptb">Português</label>
+      </div>
+
+      <div>
+      <input type="checkbox" id="enu">
+      <label for="enu">Inglês</label>
+      </div>
+
+      <div>
+      <input type="checkbox" id="deu">
+      <label for="deu">Alemão</label>
+      </div>
+
+      <div>
+      <input type="checkbox" id="ita">
+      <label for="ita">Italiano</label>
+      </div>
+
+      <div>
+      <input type="checkbox" id="esp">
+      <label for="esp">Espanhol</label>
+      </div>
+
+      <div>
+      <input type="checkbox" id="fra" checked>
+      <label for="fra">Francês</label>
+      </div>
+      <button type="submit">Salvar</button>
+  </form>
+  <script src="options.js"></script>
+  <p><strong>Importante: </strong>devido à uma limitação dos navegadores,
+  selecionando mais de uma opção irá criar um sub-menu.</p>
+</body>
+
+</html>

src/options.js

@@ -0,0 +1,32 @@
+async function saveOptions(e) {
+  e.preventDefault();
+  await chrome.storage.sync.set({
+    last: document.querySelector("#last").checked,
+    ptb: document.querySelector("#ptb").checked,
+    enu: document.querySelector("#enu").checked,
+    deu: document.querySelector("#deu").checked,
+    ita: document.querySelector("#ita").checked,
+    esp: document.querySelector("#esp").checked,
+    fra: document.querySelector("#fra").checked,
+  });
+    alert("Opções salvas!");
+  await chrome.runtime.sendMessage({ name: 'reloadContextMenus' });
+  restoreOptions();
+}
+
+async function restoreOptions() {
+  let option = await chrome.storage.sync.get(['last', 'ptb', 'enu', 'deu', 'ita', 'esp', 'fra']);
+  document.querySelector("#last").checked = option.last;
+  document.querySelector("#ptb").checked = option.ptb;
+  document.querySelector("#enu").checked = option.enu;
+  document.querySelector("#deu").checked = option.deu;
+  document.querySelector("#ita").checked = option.ita;
+  document.querySelector("#esp").checked = option.esp;
+  document.querySelector("#fra").checked = option.fra;
+  if (!option.ptb && !option.enu && !option.deu && !option.ita && !option.esp && !option.fra) {
+      document.querySelector("#last").checked = true;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);

tags

@@ -0,0 +1,149 @@
+!_TAG_EXTRA_DESCRIPTION	anonymous	/Include tags for non-named objects like lambda/
+!_TAG_EXTRA_DESCRIPTION	fileScope	/Include tags of file scope/
+!_TAG_EXTRA_DESCRIPTION	pseudo	/Include pseudo tags/
+!_TAG_EXTRA_DESCRIPTION	subparser	/Include tags generated by subparsers/
+!_TAG_FIELD_DESCRIPTION	epoch	/the last modified time of the input file (only for F\/file kind tag)/
+!_TAG_FIELD_DESCRIPTION	file	/File-restricted scoping/
+!_TAG_FIELD_DESCRIPTION	input	/input file/
+!_TAG_FIELD_DESCRIPTION	name	/tag name/
+!_TAG_FIELD_DESCRIPTION	pattern	/pattern/
+!_TAG_FIELD_DESCRIPTION	typeref	/Type and name of a variable or typedef/
+!_TAG_FILE_FORMAT	2	/extended format; --format=1 will not append ;" to lines/
+!_TAG_FILE_SORTED	1	/0=unsorted, 1=sorted, 2=foldcase/
+!_TAG_KIND_DESCRIPTION!HTML	C,stylesheet	/stylesheets/
+!_TAG_KIND_DESCRIPTION!HTML	I,id	/identifiers/
+!_TAG_KIND_DESCRIPTION!HTML	J,script	/scripts/
+!_TAG_KIND_DESCRIPTION!HTML	a,anchor	/named anchors/
+!_TAG_KIND_DESCRIPTION!HTML	c,class	/classes/
+!_TAG_KIND_DESCRIPTION!HTML	h,heading1	/H1 headings/
+!_TAG_KIND_DESCRIPTION!HTML	i,heading2	/H2 headings/
+!_TAG_KIND_DESCRIPTION!HTML	j,heading3	/H3 headings/
+!_TAG_KIND_DESCRIPTION!HTML	t,title	/titles/
+!_TAG_KIND_DESCRIPTION!JSON	a,array	/arrays/
+!_TAG_KIND_DESCRIPTION!JSON	b,boolean	/booleans/
+!_TAG_KIND_DESCRIPTION!JSON	n,number	/numbers/
+!_TAG_KIND_DESCRIPTION!JSON	o,object	/objects/
+!_TAG_KIND_DESCRIPTION!JSON	s,string	/strings/
+!_TAG_KIND_DESCRIPTION!JSON	z,null	/nulls/
+!_TAG_KIND_DESCRIPTION!JavaScript	C,constant	/constants/
+!_TAG_KIND_DESCRIPTION!JavaScript	G,getter	/getters/
+!_TAG_KIND_DESCRIPTION!JavaScript	M,field	/fields/
+!_TAG_KIND_DESCRIPTION!JavaScript	S,setter	/setters/
+!_TAG_KIND_DESCRIPTION!JavaScript	c,class	/classes/
+!_TAG_KIND_DESCRIPTION!JavaScript	f,function	/functions/
+!_TAG_KIND_DESCRIPTION!JavaScript	g,generator	/generators/
+!_TAG_KIND_DESCRIPTION!JavaScript	m,method	/methods/
+!_TAG_KIND_DESCRIPTION!JavaScript	p,property	/properties/
+!_TAG_KIND_DESCRIPTION!JavaScript	v,variable	/global variables/
+!_TAG_KIND_DESCRIPTION!Markdown	S,subsection	/level 2 sections/
+!_TAG_KIND_DESCRIPTION!Markdown	T,l4subsection	/level 4 sections/
+!_TAG_KIND_DESCRIPTION!Markdown	c,chapter	/chapters/
+!_TAG_KIND_DESCRIPTION!Markdown	n,footnote	/footnotes/
+!_TAG_KIND_DESCRIPTION!Markdown	s,section	/sections/
+!_TAG_KIND_DESCRIPTION!Markdown	t,subsubsection	/level 3 sections/
+!_TAG_KIND_DESCRIPTION!Markdown	u,l5subsection	/level 5 sections/
+!_TAG_KIND_DESCRIPTION!Sh	a,alias	/aliases/
+!_TAG_KIND_DESCRIPTION!Sh	f,function	/functions/
+!_TAG_KIND_DESCRIPTION!Sh	h,heredoc	/label for here document/
+!_TAG_KIND_DESCRIPTION!Sh	s,script	/script files/
+!_TAG_OUTPUT_EXCMD	mixed	/number, pattern, mixed, or combineV2/
+!_TAG_OUTPUT_FILESEP	slash	/slash or backslash/
+!_TAG_OUTPUT_MODE	u-ctags	/u-ctags or e-ctags/
+!_TAG_OUTPUT_VERSION	0.0	/current.age/
+!_TAG_PARSER_VERSION!HTML	0.0	/current.age/
+!_TAG_PARSER_VERSION!JSON	0.0	/current.age/
+!_TAG_PARSER_VERSION!JavaScript	0.0	/current.age/
+!_TAG_PARSER_VERSION!Markdown	0.0	/current.age/
+!_TAG_PARSER_VERSION!Sh	0.0	/current.age/
+!_TAG_PATTERN_LENGTH_LIMIT	96	/0 for no limit/
+!_TAG_PROC_CWD	/run/media/bruno/Multimedia/MyDocuments/Development/BrunoFontes/dicionariosAddon/	//
+!_TAG_PROGRAM_AUTHOR	Universal Ctags Team	//
+!_TAG_PROGRAM_NAME	Universal Ctags	/Derived from Exuberant Ctags/
+!_TAG_PROGRAM_URL	https://ctags.io/	/official site/
+!_TAG_PROGRAM_VERSION	6.0.0	/p6.0.20221218.0/
+!_TAG_ROLE_DESCRIPTION!HTML!class	attribute	/assigned as attributes/
+!_TAG_ROLE_DESCRIPTION!HTML!script	extFile	/referenced as external files/
+!_TAG_ROLE_DESCRIPTION!HTML!stylesheet	extFile	/referenced as external files/
+!_TAG_ROLE_DESCRIPTION!Sh!heredoc	endmarker	/end marker/
+!_TAG_ROLE_DESCRIPTION!Sh!script	loaded	/loaded/
+0	src/manifest.json	/^        "contextMenus"$/;"	s	array:permissions
+0	src/manifest.json	/^        "scripts": ["background.js"]$/;"	s	array:background.scripts
+0	src/manifest_all.json	/^        "contextMenus",$/;"	s	array:permissions
+1	src/manifest_all.json	/^        "storage"$/;"	s	array:permissions
+128	src/manifest.json	/^        "128": "img\/logo-128.png",$/;"	s	object:icons
+128	src/manifest_all.json	/^        "128": "img\/logo-128.png",$/;"	s	object:icons
+140	src/manifest.json	/^        "140": "img\/logo-140.png",$/;"	s	object:icons
+140	src/manifest_all.json	/^        "140": "img\/logo-140.png",$/;"	s	object:icons
+16	src/manifest.json	/^        "16": "img\/logo-16.png",$/;"	s	object:icons
+16	src/manifest_all.json	/^        "16": "img\/logo-16.png",$/;"	s	object:icons
+260	src/manifest.json	/^        "260": "img\/logo-260.png"$/;"	s	object:icons
+260	src/manifest_all.json	/^        "260": "img\/logo-260.png"$/;"	s	object:icons
+48	src/manifest.json	/^        "48": "img\/logo-48.png",$/;"	s	object:icons
+48	src/manifest_all.json	/^        "48": "img\/logo-48.png",$/;"	s	object:icons
+96	src/manifest.json	/^        "96": "img\/logo-96.png",$/;"	s	object:icons
+96	src/manifest_all.json	/^        "96": "img\/logo-96.png",$/;"	s	object:icons
+Contributing	README.md	/^## Contributing$/;"	s	chapter:Dicionarios.cc Browser Extension
+Deployment	README.md	/^## Deployment$/;"	s	chapter:Dicionarios.cc Browser Extension
+Dicionarios.cc	src/popup.html	/^        <title>Dicionarios.cc<\/title>$/;"	j
+Dicionarios.cc Browser Extension	README.md	/^# Dicionarios.cc Browser Extension$/;"	c
+How to	README.md	/^### How to$/;"	S	section:Dicionarios.cc Browser Extension""Deployment
+action	src/manifest.json	/^    "action": {$/;"	o
+action	src/manifest_all.json	/^    "action": {$/;"	o
+addContextMenu	src/background.js	/^function addContextMenu(label, languageId) {$/;"	f
+anonymousObjecta2d9ec870105	src/background.js	/^    chrome.contextMenus.create({ $/;"	v
+anonymousObjecta2d9ec870205	src/background.js	/^    chrome.tabs.create({ url: url});$/;"	v
+anonymousObjectcf2541730105	src/options.js	/^  await chrome.storage.sync.set({$/;"	v
+anonymousObjectcf2541730205	src/options.js	/^  await chrome.runtime.sendMessage({ name: 'reloadContextMenus' });$/;"	v
+background	src/manifest.json	/^    "background": {$/;"	o
+background	src/manifest_all.json	/^    "background": {<<firefox>>$/;"	o
+browser_specific_settings	src/manifest.json	/^    "browser_specific_settings": {$/;"	o
+browser_specific_settings	src/manifest_all.json	/^    "browser_specific_settings": {$/;"	o
+contexts	src/background.js	/^        contexts: ['selection'],$/;"	p	variable:anonymousObjecta2d9ec870105
+default_popup	src/manifest.json	/^        "default_popup": "https:\/\/dicionarios.cc"$/;"	s	object:action
+default_popup	src/manifest_all.json	/^        "default_popup": "https:\/\/dicionarios.cc"$/;"	s	object:action
+default_title	src/manifest.json	/^        "default_title": "Dicionarios.cc",$/;"	s	object:action
+default_title	src/manifest_all.json	/^        "default_title": "Dicionarios.cc",$/;"	s	object:action
+description	src/manifest.json	/^    "description": "An easy shortcut to Dicionarios.cc",$/;"	s
+description	src/manifest_all.json	/^    "description": "An easy shortcut to Dicionarios.cc",$/;"	s
+deu	src/options.html	/^      <input type="checkbox" id="deu">$/;"	I
+deu	src/options.js	/^    deu: document.querySelector("#deu").checked,$/;"	p	variable:anonymousObjectcf2541730105
+enu	src/options.html	/^      <input type="checkbox" id="enu">$/;"	I
+enu	src/options.js	/^    enu: document.querySelector("#enu").checked,$/;"	p	variable:anonymousObjectcf2541730105
+esp	src/options.html	/^      <input type="checkbox" id="esp">$/;"	I
+esp	src/options.js	/^    esp: document.querySelector("#esp").checked,$/;"	p	variable:anonymousObjectcf2541730105
+fra	src/options.html	/^      <input type="checkbox" id="fra" checked>$/;"	I
+fra	src/options.js	/^    fra: document.querySelector("#fra").checked,$/;"	p	variable:anonymousObjectcf2541730105
+gecko	src/manifest.json	/^        "gecko": {$/;"	o	object:browser_specific_settings
+gecko	src/manifest_all.json	/^        "gecko": {$/;"	o	object:browser_specific_settings
+gecko_android	src/manifest.json	/^        "gecko_android": {$/;"	o	object:browser_specific_settings
+gecko_android	src/manifest_all.json	/^        "gecko_android": {$/;"	o	object:browser_specific_settings
+icons	src/manifest.json	/^    "icons": {$/;"	o
+icons	src/manifest_all.json	/^    "icons": {$/;"	o
+id	src/background.js	/^        id: languageId,$/;"	p	variable:anonymousObjecta2d9ec870105
+id	src/manifest.json	/^            "id": "{0ad357e8-8322-49d9-b1af-dc18934d8b78}"$/;"	s	object:browser_specific_settings.gecko
+id	src/manifest.json	/^            "id": "{0ad357e8-8322-49d9-b1af-dc18934d8b78}"$/;"	s	object:browser_specific_settings.gecko_android
+id	src/manifest_all.json	/^            "id": "{0ad357e8-8322-49d9-b1af-dc18934d8b78}"$/;"	s	object:browser_specific_settings.gecko
+id	src/manifest_all.json	/^            "id": "{0ad357e8-8322-49d9-b1af-dc18934d8b78}"$/;"	s	object:browser_specific_settings.gecko_android
+ita	src/options.html	/^      <input type="checkbox" id="ita">$/;"	I
+ita	src/options.js	/^    ita: document.querySelector("#ita").checked,$/;"	p	variable:anonymousObjectcf2541730105
+last	src/options.html	/^      <input type="checkbox" id="last">$/;"	I
+last	src/options.js	/^    last: document.querySelector("#last").checked,$/;"	p	variable:anonymousObjectcf2541730105
+manifest_version	src/manifest.json	/^    "manifest_version": 3,$/;"	n
+manifest_version	src/manifest_all.json	/^    "manifest_version": 3,$/;"	n
+name	src/manifest.json	/^    "name": "Dicionarios.cc",$/;"	s
+name	src/manifest_all.json	/^    "name": "Dicionarios.cc",$/;"	s
+name	src/options.js	/^  await chrome.runtime.sendMessage({ name: 'reloadContextMenus' });$/;"	p	variable:anonymousObjectcf2541730205
+options_ui	src/manifest_all.json	/^    "options_ui": {$/;"	o
+page	src/manifest_all.json	/^        "page": "options.html"$/;"	s	object:options_ui
+permissions	src/manifest.json	/^    "permissions": [$/;"	a
+permissions	src/manifest_all.json	/^    "permissions": [$/;"	a
+ptb	src/options.html	/^      <input type="checkbox" id="ptb">$/;"	I
+ptb	src/options.js	/^    ptb: document.querySelector("#ptb").checked,$/;"	p	variable:anonymousObjectcf2541730105
+restoreOptions	src/options.js	/^async function restoreOptions() {$/;"	f
+saveOptions	src/options.js	/^async function saveOptions(e) {$/;"	f
+scripts	src/manifest.json	/^        "scripts": ["background.js"]$/;"	a	object:background
+setupContextMenu	src/background.js	/^async function setupContextMenu() {$/;"	f
+title	src/background.js	/^        title: 'Pesquisar' + label + ': %s', $/;"	p	variable:anonymousObjecta2d9ec870105
+url	src/background.js	/^    chrome.tabs.create({ url: url});$/;"	p	variable:anonymousObjecta2d9ec870205
+version	src/manifest.json	/^    "version": "0.0.1",$/;"	s
+version	src/manifest_all.json	/^    "version": "0.0.1",$/;"	s