toolkit/components/extensions/test/mochitest/test_ext_scripting_insertCSS.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Tests scripting.insertCSS()</title>
   6   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <script type="text/javascript" src="/tests/SimpleTest/ExtensionTestUtils.js"></script>
   8   <script type="text/javascript" src="head.js"></script>
   9   <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
  10 </head>
  11 <body>
  12
  13 <script type="text/javascript">
  14 "use strict";
  15
  16 const MOCHITEST_HOST_PERMISSIONS = [
  17   "*://mochi.test/",
  18   "*://mochi.xorigin-test/",
  19   "*://test1.example.com/",
  20 ];
  21
  22 const makeExtension = ({ manifest: manifestProps, ...otherProps }) => {
  23   return ExtensionTestUtils.loadExtension({
  24     manifest: {
  25       manifest_version: 3,
  26       permissions: ["scripting"],
  27       host_permissions: [
  28         ...MOCHITEST_HOST_PERMISSIONS,
  29         // Used in `file_contains_iframe.html`
  30         "https://example.org/",
  31       ],
  32       granted_host_permissions: true,
  33       ...manifestProps,
  34     },
  35     useAddonManager: "temporary",
  36     ...otherProps,
  37   });
  38 };
  39
  40 add_task(async function setup() {
  41   await SpecialPowers.pushPrefEnv({
  42     set: [["extensions.manifestV3.enabled", true]],
  43   });
  44 });
  45
  46 add_task(async function test_insertCSS_and_removeCSS_params_validation() {
  47   let extension = makeExtension({
  48     async background() {
  49       const tabs = await browser.tabs.query({ active: true });
  50
  51       const TEST_CASES = [
  52         {
  53           title: "no files and no css",
  54           cssParams: {},
  55           expectedError: "Exactly one of files and css must be specified.",
  56         },
  57         {
  58           title: "both files and css are passed",
  59           cssParams: {
  60             files: ["styles.css"],
  61             css: "* { background: rgb(1, 1, 1) }",
  62           },
  63           expectedError: "Exactly one of files and css must be specified.",
  64         },
  65         {
  66           title: "both allFrames and frameIds are passed",
  67           cssParams: {
  68             target: {
  69               tabId: tabs[0].id,
  70               allFrames: true,
  71               frameIds: [1, 2, 3],
  72             },
  73             files: ["styles.css"],
  74           },
  75           expectedError: "Cannot specify both 'allFrames' and 'frameIds'.",
  76         },
  77         {
  78           title: "empty css string with a file",
  79           cssParams: {
  80             css: "",
  81             files: ["styles.css"],
  82           },
  83           expectedError: "Exactly one of files and css must be specified.",
  84         },
  85       ];
  86
  87       for (const { title, cssParams, expectedError } of TEST_CASES) {
  88         await browser.test.assertRejects(
  89           browser.scripting.insertCSS({
  90             target: { tabId: tabs[0].id },
  91             ...cssParams,
  92           }),
  93           expectedError,
  94           `${title} - expected error for insertCSS()`
  95         );
  96
  97         await browser.test.assertRejects(
  98           browser.scripting.removeCSS({
  99             target: { tabId: tabs[0].id },
 100             ...cssParams,
 101           }),
 102           expectedError,
 103           `${title} - expected error for removeCSS()`
 104         );
 105       }
 106
 107       browser.test.notifyPass("checks-done");
 108     },
 109   });
 110
 111   await extension.startup();
 112   await extension.awaitFinish("checks-done");
 113   await extension.unload();
 114 });
 115
 116 add_task(async function test_insertCSS_with_invalid_tabId() {
 117   let extension = makeExtension({
 118     async background() {
 119       // This tab ID should not exist.
 120       const tabId = 123456789;
 121
 122       await browser.test.assertRejects(
 123         browser.scripting.insertCSS({
 124           target: { tabId },
 125           css: "* { background: rgb(1, 1, 1) }",
 126         }),
 127         `Invalid tab ID: ${tabId}`
 128       );
 129
 130       browser.test.notifyPass("insert-css");
 131     },
 132   });
 133
 134   await extension.startup();
 135   await extension.awaitFinish("insert-css");
 136   await extension.unload();
 137 });
 138
 139 add_task(async function test_insertCSS_with_wrong_host_permissions() {
 140   let extension = makeExtension({
 141     manifest: {
 142       host_permissions: [],
 143     },
 144     async background() {
 145       const tabs = await browser.tabs.query({ active: true });
 146
 147       browser.test.assertEq(1, tabs.length, "expected 1 tab");
 148
 149       browser.test.assertRejects(
 150         browser.scripting.insertCSS({
 151           target: { tabId: tabs[0].id },
 152           css: "* { background: rgb(1, 1, 1) }",
 153         }),
 154         /Missing host permission for the tab/,
 155         "expected host permission error"
 156       );
 157
 158       browser.test.notifyPass("insert-css");
 159     },
 160   });
 161
 162   await extension.startup();
 163   await extension.awaitFinish("insert-css");
 164   await extension.unload();
 165 });
 166
 167 add_task(async function test_insertCSS_and_removeCSS() {
 168   let extension = makeExtension({
 169     manifest: {
 170       permissions: ["scripting", "webNavigation"],
 171     },
 172     async background() {
 173       const tabs = await browser.tabs.query({ active: true });
 174       browser.test.assertEq(1, tabs.length, "expected 1 tab");
 175
 176       const tabId = tabs[0].id;
 177
 178       const frames = await browser.webNavigation.getAllFrames({ tabId });
 179       // 1. Top-level frame that loads `file_contains_iframe.html`
 180       // 2. Frame that loads `file_contains_img.html`
 181       browser.test.assertEq(2, frames.length, "expected 2 frames");
 182       const frameIds = frames.map(frame => frame.frameId);
 183
 184       const cssColor1 = "rgb(1, 1, 1)";
 185       const cssColor2 = "rgb(2, 2, 2)";
 186       const cssColorInFile1 = "rgb(3, 3, 3)";
 187       const defaultColor = "rgba(0, 0, 0, 0)";
 188
 189       const TEST_CASES = [
 190         {
 191           title: "with css prop",
 192           elementId: "div-1",
 193           cssParams: [
 194             {
 195               target: { tabId },
 196               css: `#div-1 { background: ${cssColor1} }`,
 197             },
 198           ],
 199           expectedResults: [cssColor1, defaultColor],
 200         },
 201         {
 202           title: "with a file",
 203           elementId: "div-2",
 204           cssParams: [
 205             {
 206               target: { tabId },
 207               files: ["file1.css"],
 208             },
 209           ],
 210           expectedResults: [cssColorInFile1, defaultColor],
 211         },
 212         {
 213           title: "css prop in a single frame",
 214           elementId: "div-3",
 215           cssParams: [
 216             {
 217               target: { tabId, frameIds: [frameIds[0]] },
 218               css: `#div-3 { background: ${cssColor2} }`,
 219             },
 220           ],
 221           expectedResults: [cssColor2, defaultColor],
 222         },
 223         {
 224           title: "css prop in multiple frames",
 225           elementId: "div-4",
 226           cssParams: [
 227             {
 228               target: { tabId, frameIds },
 229               css: `#div-4 { background: ${cssColor1} }`,
 230             },
 231           ],
 232           expectedResults: [cssColor1, cssColor1],
 233         },
 234         {
 235           title: "allFrames is true",
 236           elementId: "div-5",
 237           cssParams: [
 238             {
 239               target: { tabId, allFrames: true },
 240               css: `#div-5 { background: ${defaultColor} }`,
 241             },
 242           ],
 243           expectedResults: [defaultColor, defaultColor],
 244         },
 245         {
 246           title: "origin: 'AUTHOR'",
 247           elementId: "div-6",
 248           cssParams: [
 249             {
 250               target: { tabId },
 251               css: `#div-6 { background: ${cssColor1} }`,
 252               origin: "AUTHOR",
 253             },
 254             {
 255               target: { tabId },
 256               css: `#div-6 { background: ${cssColor2} }`,
 257               origin: "AUTHOR",
 258             },
 259           ],
 260           expectedResults: [cssColor2, defaultColor],
 261         },
 262         {
 263           title: "origin: 'USER'",
 264           elementId: "div-7",
 265           cssParams: [
 266             {
 267               target: { tabId },
 268               css: `#div-7 { background: ${cssColor1} !important }`,
 269               origin: "USER",
 270             },
 271             {
 272               target: { tabId },
 273               css: `#div-7 { background: ${cssColor2} !important }`,
 274               origin: "AUTHOR",
 275             },
 276           ],
 277           // User has higher importance.
 278           expectedResults: [cssColor1, defaultColor],
 279         },
 280         {
 281           title: "empty css string",
 282           elementId: "div-8",
 283           cssParams: [
 284             {
 285               target: { tabId },
 286               css: "",
 287             },
 288           ],
 289           expectedResults: [defaultColor, defaultColor],
 290         },
 291         {
 292           title: "allFrames is false",
 293           elementId: "div-9",
 294           cssParams: [
 295             {
 296               target: { tabId, allFrames: false },
 297               css: `#div-9 { background: ${cssColor1} }`,
 298             },
 299           ],
 300           expectedResults: [cssColor1, defaultColor],
 301         },
 302       ];
 303
 304       const getBackgroundColor = elementId => {
 305         return window.getComputedStyle(document.getElementById(elementId))
 306           .backgroundColor;
 307       };
 308
 309       for (const {
 310         title,
 311         elementId,
 312         cssParams,
 313         expectedResults,
 314       } of TEST_CASES) {
 315         // Create a unique element for the current test case.
 316         await browser.scripting.executeScript({
 317           target: { tabId, allFrames: true },
 318           func: elementId => {
 319             const element = document.createElement("div");
 320             element.setAttribute("id", elementId);
 321             document.body.appendChild(element);
 322           },
 323           args: [elementId],
 324         });
 325
 326         for (const params of cssParams) {
 327           const result = await browser.scripting.insertCSS(params);
 328           // `insertCSS()` should not resolve to a value.
 329           browser.test.assertEq(undefined, result, "got expected empty result");
 330         }
 331
 332         let results = await browser.scripting.executeScript({
 333           target: { tabId, allFrames: true },
 334           func: getBackgroundColor,
 335           args: [elementId],
 336         });
 337         results.sort((a, b) => a.frameId - b.frameId);
 338
 339         browser.test.assertEq(
 340           expectedResults.length,
 341           results.length,
 342           `${title} - got the expected number of results`
 343         );
 344         results.forEach((result, index) => {
 345           browser.test.assertEq(
 346             expectedResults[index],
 347             result.result,
 348             `${title} - got expected result (index=${index}): ${title}`
 349           );
 350         });
 351
 352         results = await Promise.all(
 353           cssParams.map(params => browser.scripting.removeCSS(params))
 354         );
 355         // `removeCSS()` should not resolve to a value.
 356         results.forEach(result => {
 357           browser.test.assertEq(undefined, result, "got expected empty result");
 358         });
 359
 360         results = await browser.scripting.executeScript({
 361           target: { tabId, allFrames: true },
 362           func: getBackgroundColor,
 363           args: [elementId],
 364         });
 365
 366         browser.test.assertTrue(
 367           results.every(({ result }) => result === defaultColor),
 368           "got expected default color in all frames"
 369         );
 370       }
 371
 372       browser.test.notifyPass("insert-and-remove-css");
 373     },
 374     files: {
 375       "file1.css": "#div-2 { background: rgb(3, 3, 3) }",
 376     },
 377   });
 378
 379   let tab = await AppTestDelegate.openNewForegroundTab(
 380     window,
 381     "https://test1.example.com/tests/toolkit/components/extensions/test/mochitest/file_contains_iframe.html",
 382     true
 383   );
 384
 385   await extension.startup();
 386   await extension.awaitFinish("insert-and-remove-css");
 387   await extension.unload();
 388
 389   await AppTestDelegate.removeTab(window, tab);
 390 });
 391
 392 </script>
 393
 394 </body>
 395 </html>