From 67c6943e92a2fe510c45753a8af5d952af565da2 Mon Sep 17 00:00:00 2001
From: Valentin Rigal <rigal@teklia.com>
Date: Thu, 3 Jun 2021 12:23:47 +0200
Subject: [PATCH] Load example content script
---
src/content/content.js | 58 ++++++++++++++++++++++++++++++++++++++++++
src/manifest.json | 9 ++++++-
vue.config.js | 13 +++++++++-
3 files changed, 78 insertions(+), 2 deletions(-)
create mode 100644 src/content/content.js
diff --git a/src/content/content.js b/src/content/content.js
new file mode 100644
index 00000000..cbd64fab
--- /dev/null
+++ b/src/content/content.js
@@ -0,0 +1,58 @@
+const inputFields = document.getElementsByTagName("input");
+const replacements = {
+ a: "b",
+};
+// Create a simple keyboard
+const buttonA = document.createElement("button");
+buttonA.textContent = 'Insert "a"';
+const buttonB = document.createElement("button");
+buttonB.textContent = 'Insert "b"';
+const keyboard = document.createElement("div");
+keyboard.appendChild(buttonA);
+keyboard.appendChild(buttonB);
+
+let selectedInput = null;
+
+const addChar = (i, char) => {
+ const start = i.selectionStart;
+ i.value = i.value.slice(0, start) + char + i.value.slice(i.selectionEnd);
+ // Updating the input value moves the caret to the end by default
+ i.selectionStart = i.selectionEnd = start + 1;
+};
+
+for (const input of inputFields) {
+ input.onkeydown = (e) => {
+ const character = replacements[e.key];
+ if (!character) return;
+ addChar(input, character);
+ return false;
+ };
+ // Handle the case where the input is already focused
+ if (document.activeElement === input) {
+ input.parentElement.appendChild(keyboard);
+ selectedInput = input;
+ }
+ input.onfocus = () => {
+ input.parentElement.appendChild(keyboard);
+ selectedInput = input;
+ };
+ // https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
+ input.ontransitionend = (e) => {
+ if (input.matches(":focus") || keyboard.contains(document.activeElement))
+ e.target.focus();
+ else {
+ input.parentElement.removeChild(keyboard);
+ selectedInput = null;
+ }
+ };
+}
+
+keyboard.onclick = () => {
+ return false;
+};
+buttonA.onmouseup = () => {
+ if (selectedInput) addChar(selectedInput, "a");
+};
+buttonB.onmouseup = () => {
+ if (selectedInput) addChar(selectedInput, "b");
+};
diff --git a/src/manifest.json b/src/manifest.json
index 98a6e854..e986c126 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -24,5 +24,12 @@
"options_ui": {
"page": "options.html",
"browser_style": true
- }
+ },
+ "content_scripts": [
+ {
+ "matches": ["<all_urls>"],
+ "js": ["js/content.js"],
+ "css": ["css/content.css"]
+ }
+ ]
}
diff --git a/vue.config.js b/vue.config.js
index dec60c63..71c2d08a 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,6 +13,17 @@ module.exports = {
},
},
pluginOptions: {
- browserExtension: {},
+ browserExtension: {
+ components: {
+ contentScripts: true,
+ },
+ componentOptions: {
+ contentScripts: {
+ entries: {
+ content: "src/content/content.js",
+ },
+ },
+ },
+ },
},
};
--
GitLab