Stop using entry points for content scripts

package.json

@@ -34,6 +34,7 @@
 		"webextension-polyfill-ts": "^0.19.0",
 		"webpack": "^4.43.0",
 		"webpack-cli": "^3.3.12",
+		"worklet-loader": "^1.0.0",
 		"zip-webpack-plugin": "^3.0.0"
 	},
 	"scripts": {

src/background/background.ts

@@ -2,6 +2,7 @@ import { browser, Runtime, Tabs } from "webextension-polyfill-ts";
 import { GTranslateScraper } from "./gtranslate_scraper";
 import { Flashcards } from "./database";
 import { Communicator, commandKinds } from "../communication";
+import content_script from "../frontend/content_script/content_script.ts?raw";
 
 let com = new Communicator();
 
@@ -30,7 +31,7 @@ const setEnabledSession = async (tabID: number, value: boolean) =>
 
 const injectScript = async (tabID: number, enabled?: boolean) => {
 	await browser.tabs.executeScript(tabID, {
-		file: "/content_script.bundle.js",
+		file: content_script,
 	});
 	if (enabled === undefined) enabled = await isEnabledSession(tabID);
 	browser.tabs.sendMessage(tabID, {

src/background/gtranslate_scraper.ts

@@ -1,4 +1,5 @@
 import { browser, WebRequest, Runtime } from "webextension-polyfill-ts";
+import content_script from "./gtranslate_content_script.ts?raw";
 
 export class GTranslateScraper {
 	iframe: HTMLIFrameElement;
@@ -31,7 +32,7 @@ export class GTranslateScraper {
 
 		//Registers a temp content script, because we cannot inject scripts into iframes created on the background html page, because they have no tabId
 		const js = {
-			file: "gtranslate_scraper.bundle.js",
+			file: content_script,
 		};
 		browser.contentScripts
 			.register({

src/frontend/content_script/Translate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Spinner from "./Spinner.svelte";
+	import Translated from "./Translated.svelte";
 	import { Communicator } from "../../communication";
 	import { createEventDispatcher, tick } from "svelte";
 
@@ -19,5 +20,5 @@
 {#await trans_promise}
 	<Spinner />
 {:then trans}
-	<span>{trans.result}</span>
+	<Translated {trans} />
 {/await}

src/frontend/content_script/Translated.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let trans: Translation;
+</script>
+
+<style lang="scss">
+	.translatedContainer {
+		display: flex;
+		align-items: center;
+	}
+	button {
+		min-height: 100%;
+	}
+</style>
+
+<div class="translatedContainer">
+	<span>{trans.result}</span>
+	<button>a</button>
+</div>

src/frontend/content_script/tippy.scss

@@ -3,5 +3,4 @@
 	* {
 		user-select: none;
 	}
-	font-size: larger;
 }

webpack.config.js

@@ -10,19 +10,6 @@ let mode = process.env.NODE_ENV || "development";
 let options = {
 	entry: {
 		popup: path.join(__dirname, "src", "frontend", "popup", "popup.ts"),
-		content_script: path.join(
-			__dirname,
-			"src",
-			"frontend",
-			"content_script",
-			"content_script.ts"
-		),
-		gtranslate_scraper: path.join(
-			__dirname,
-			"src",
-			"background",
-			"gtranslate_content_script.ts"
-		),
 		background: path.join(__dirname, "src", "background", "background.ts"),
 	},
 	output: {
@@ -41,7 +28,24 @@ let options = {
 		rules: [
 			{
 				test: /\.tsx?$/,
-				use: "ts-loader",
+
+				oneOf: [
+					{
+						resourceQuery: /raw/,
+						use: [
+							{
+								loader: "worklet-loader",
+								options: {
+									name: "content_script.[hash].js",
+								},
+							},
+							"ts-loader",
+						],
+					},
+					{
+						use: "ts-loader",
+					},
+				],
 				exclude: /node_modules/,
 			},
 			{
@@ -80,11 +84,11 @@ let options = {
 			filename: "popup.html",
 			chunks: ["popup"],
 		}),
+		new CleanWebpackPlugin(),
 	],
 };
 
 if (mode !== "development") {
-	options.plugins.unshift(new CleanWebpackPlugin());
 	options.plugins.push(
 		new ZipPlugin({
 			filename: "addon",

yarn.lock

@@ -3115,6 +3115,11 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoek@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
+  integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
+
 homedir-polyfill@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -3944,7 +3949,7 @@ loader-runner@^2.4.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -5602,6 +5607,14 @@ sax@>=0.6.0:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+schema-utils@^0.4.0:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -7009,6 +7022,15 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worklet-loader@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/worklet-loader/-/worklet-loader-1.0.0.tgz#17e2eef75981de469c1e1e200ad1ffb54efe7a29"
+  integrity sha512-4yFqiGDwICoJB4ZbWHzCzyTyDrRnCU1XfvSJtjiBBDreuWDYpA6wf8yqQjNckcjL1jm/sT9ocSvP5tJnmsMOLA==
+  dependencies:
+    hoek "^4.2.1"
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"