feat: add removeInsertedCSS (#16579)

atom/renderer/api/atom_api_web_frame.cc

@@ -325,11 +325,22 @@ void InsertText(v8::Local<v8::Value> window, const std::string& text) {
   }
 }
 
-void InsertCSS(v8::Local<v8::Value> window, const std::string& css) {
+base::string16 InsertCSS(v8::Local<v8::Value> window, const std::string& css) {
   blink::WebFrame* web_frame = GetRenderFrame(window)->GetWebFrame();
   if (web_frame->IsWebLocalFrame()) {
-    web_frame->ToWebLocalFrame()->GetDocument().InsertStyleSheet(
+    return web_frame->ToWebLocalFrame()
-        blink::WebString::FromUTF8(css));
+        ->GetDocument()
+        .InsertStyleSheet(blink::WebString::FromUTF8(css))
+        .Utf16();
+  }
+  return base::string16();
+}
+
+void RemoveInsertedCSS(v8::Local<v8::Value> window, const base::string16& key) {
+  blink::WebFrame* web_frame = GetRenderFrame(window)->GetWebFrame();
+  if (web_frame->IsWebLocalFrame()) {
+    web_frame->ToWebLocalFrame()->GetDocument().RemoveInsertedStyleSheet(
+        blink::WebString::FromUTF16(key));
   }
 }
 
@@ -546,6 +557,7 @@ void Initialize(v8::Local<v8::Object> exports,
   dict.SetMethod("setSpellCheckProvider", &SetSpellCheckProvider);
   dict.SetMethod("insertText", &InsertText);
   dict.SetMethod("insertCSS", &InsertCSS);
+  dict.SetMethod("removeInsertedCSS", &RemoveInsertedCSS);
   dict.SetMethod("executeJavaScript", &ExecuteJavaScript);
   dict.SetMethod("executeJavaScriptInIsolatedWorld",
                  &ExecuteJavaScriptInIsolatedWorld);

docs/api/web-contents.md

@@ -987,9 +987,12 @@ Returns `String` - The user agent for this web page.
 
 * `css` String
 
-Returns `Promise<void>`
+Returns `Promise<String>` - A promise that resolves with a key for the inserted
+CSS that can later be used to remove the CSS via
+`contents.removeInsertedCSS(key)`.
 
-Injects CSS into the current web page.
+Injects CSS into the current web page and returns a unique key for the inserted
+stylesheet.
 
 ```js
 contents.on('did-finish-load', function () {
@@ -997,6 +1000,22 @@ contents.on('did-finish-load', function () {
 })
 ```
 
+#### `contents.removeInsertedCSS(key)`
+
+* `key` String
+
+Returns `Promise<void>` - Resolves if the removal was successful.
+
+Removes the inserted CSS from the current web page. The stylesheet is identified
+by its key, which is returned from `contents.insertCSS(css)`.
+
+```js
+contents.on('did-finish-load', async function () {
+  const key = await contents.insertCSS('html, body { background-color: #f00; }')
+  contents.removeInsertedCSS(key)
+})
+```
+
 #### `contents.executeJavaScript(code[, userGesture])`
 
 * `code` String

docs/api/web-frame.md

@@ -99,7 +99,18 @@ webFrame.setSpellCheckProvider('en-US', {
 
 * `css` String - CSS source code.
 
-Inserts `css` as a style sheet in the document.
+Returns `String` - A key for the inserted CSS that can later be used to remove
+the CSS via `webFrame.removeInsertedCSS(key)`.
+
+Injects CSS into the current web page and returns a unique key for the inserted
+stylesheet.
+
+### `webFrame.removeInsertedCSS(key)`
+
+* `key` String
+
+Removes the inserted CSS from the current web page. The stylesheet is identified
+by its key, which is returned from `webFrame.insertCSS(css)`.
 
 ### `webFrame.insertText(text)`
 

docs/api/webview-tag.md

@@ -379,9 +379,21 @@ Returns `String` - The user agent for guest page.
 
 * `css` String
 
-Returns `Promise<void>`
+Returns `Promise<String>` - A promise that resolves with a key for the inserted
+CSS that can later be used to remove the CSS via
+`<webview>.removeInsertedCSS(key)`.
 
-Injects CSS into the guest page.
+Injects CSS into the current web page and returns a unique key for the inserted
+stylesheet.
+
+### `<webview>.removeInsertedCSS(key)`
+
+* `key` String
+
+Returns `Promise<void>` - Resolves if the removal was successful.
+
+Removes the inserted CSS from the current web page. The stylesheet is identified
+by its key, which is returned from `<webview>.insertCSS(css)`.
 
 ### `<webview>.executeJavaScript(code[, userGesture])`
 

lib/browser/api/web-contents.js

@@ -174,6 +174,7 @@ WebContents.prototype._sendToFrameInternal = function (frameId, channel, ...args
 const webFrameMethods = [
   'insertCSS',
   'insertText',
+  'removeInsertedCSS',
   'setLayoutZoomLevelLimits',
   'setVisualZoomLevelLimits'
 ]

lib/common/web-view-methods.js

@@ -58,6 +58,7 @@ exports.asyncMethods = new Set([
   'executeJavaScript',
   'insertCSS',
   'insertText',
+  'removeInsertedCSS',
   'send',
   'sendInputEvent',
   'setLayoutZoomLevelLimits',

spec/api-web-contents-spec.js

@@ -515,11 +515,19 @@ describe('webContents module', () => {
 
   it('supports inserting CSS', async () => {
     w.loadURL('about:blank')
-    w.webContents.insertCSS('body { background-repeat: round; }')
+    await w.webContents.insertCSS('body { background-repeat: round; }')
     const result = await w.webContents.executeJavaScript('window.getComputedStyle(document.body).getPropertyValue("background-repeat")')
     expect(result).to.equal('round')
   })
 
+  it('supports removing inserted CSS', async () => {
+    w.loadURL('about:blank')
+    const key = await w.webContents.insertCSS('body { background-repeat: round; }')
+    await w.webContents.removeInsertedCSS(key)
+    const result = await w.webContents.executeJavaScript('window.getComputedStyle(document.body).getPropertyValue("background-repeat")')
+    expect(result).to.equal('repeat')
+  })
+
   it('supports inspecting an element in the devtools', (done) => {
     w.loadURL('about:blank')
     w.webContents.once('devtools-opened', () => { done() })

spec/webview-spec.js

@@ -1010,6 +1010,21 @@ describe('<webview> tag', function () {
     })
   })
 
+  it('supports inserting CSS', async () => {
+    await loadWebView(webview, { src: `file://${fixtures}/pages/base-page.html` })
+    await webview.insertCSS('body { background-repeat: round; }')
+    const result = await webview.executeJavaScript('window.getComputedStyle(document.body).getPropertyValue("background-repeat")')
+    expect(result).to.equal('round')
+  })
+
+  it('supports removing inserted CSS', async () => {
+    await loadWebView(webview, { src: `file://${fixtures}/pages/base-page.html` })
+    const key = await webview.insertCSS('body { background-repeat: round; }')
+    await webview.removeInsertedCSS(key)
+    const result = await webview.executeJavaScript('window.getComputedStyle(document.body).getPropertyValue("background-repeat")')
+    expect(result).to.equal('repeat')
+  })
+
   describe('sendInputEvent', () => {
     it('can send keyboard event', async () => {
       loadWebView(webview, {