Added an example for contentScripts.register (#325)

* Added an example for contentScripts.register * Use messaging instead of getBackgroundPage
2026-04-30 21:07:01 +02:00 · 2018-01-26 13:11:06 -08:00
parent 5d20372527
commit 33d8fba6a8
8 changed files with 145 additions and 0 deletions
@@ -0,0 +1,16 @@
+
+#outer-wrapper {
+  padding: 0.5em;
+}
+
+input {
+  width: 100%;
+  margin-bottom: 1em;
+}
+
+textarea {
+  width: 100%;
+  resize: none;
+  border: 1px solid #e4e4e4;
+  margin-bottom: 1em;
+}
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="user-script.css"/>
+  </head>
+
+<body>
+
+  <div id="outer-wrapper">
+
+    <label for="hosts">Hosts</label>
+    <input id="hosts" type="text">
+
+    <label for="code">Code</label>
+    <textarea id="code" rows="10"></textarea>
+
+    <button id="register">Register script</button>
+
+  </div>
+
+  <script src="user-script.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,19 @@
+'use strict';
+
+const hostsInput =  document.querySelector("#hosts");
+const codeInput =  document.querySelector("#code");
+
+const defaultHosts = "*://*.org/*";
+const defaultCode = "document.body.innerHTML = '<h1>This page has been eaten<h1>'";
+
+hostsInput.value = defaultHosts;
+codeInput.value = defaultCode;
+
+function registerScript() {
+  browser.runtime.sendMessage({
+    hosts: hostsInput.value.split(","),
+    code: codeInput.value
+  });
+}
+
+document.querySelector("#register").addEventListener('click', registerScript);