How to edit a web page IN-PLACE?

66 views
Skip to first unread message

Frank

unread,
Jan 21, 2022, 10:31:43 AM1/21/22
to Chromium Extensions
Assume I load a webpage into Chrome/Chromium.
Now I want to delete a certain paragraph.
Therefore I don't want to start WebDeveloper pane.

Instead I want to toggle to something like an "edit" mode (via Addon?),
then mark the paragraph and press the DEL key.

I have seen that in the past but cannot remember exactly how it works.

Is an AddOn necessary or is this feature built-in?

Frank

PhistucK

unread,
Jan 21, 2022, 2:18:46 PM1/21/22
to Frank, Chromium Extensions
You need an extension for that, it is not built into the browser.

PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/2f07a484-290d-4291-a790-5840e377cbf4n%40chromium.org.

hrg...@gmail.com

unread,
Jan 21, 2022, 4:43:46 PM1/21/22
to Chromium Extensions, PhistucK, Chromium Extensions, Frank
"Edit mode" is a built-in feature in all browsers.
You can enable it by typing this in the address bar:

javascript:void(document.designMode='on')

You can add a button that enables this by creating what's called a bookmarklet. i.e. a bookmark whose URL is javascript code.

1642801159.png

When you click this bookmarklet in your bookmarks bar, design mode will be enabled or disabled depending on the current state.

javascript:void(document.designMode=document.designMode=='on'?'off':'on')

Frank

unread,
Jan 22, 2022, 12:56:28 AM1/22/22
to Chromium Extensions, hrg...@gmail.com, PhistucK, Chromium Extensions, Frank
Ok, thank you. It works - but only partially.

First of all: How do I see if Design Mode is currently ON or OFF?
Of cause without trial and error?

Furthermore your method has a heavy disadvantage:

When I switch back from Design Mode to "Normal" mode the red underlines in web page text do not vanish.
How do I tell Chrome to NOT show these red lines in non-design mode any more?

วิทวัส เสริญไธสง

unread,
Jan 22, 2022, 1:55:54 AM1/22/22
to Frank, Chromium Extensions, hrg...@gmail.com, PhistucK, Chromium Extensions, Frank
Ok


From: chromium-...@chromium.org <chromium-...@chromium.org> on behalf of Frank <fxte...@gmail.com>
Sent: Saturday, January 22, 2022 7:56:28 AM
To: Chromium Extensions <chromium-...@chromium.org>
Cc: hrg...@gmail.com <hrg...@gmail.com>; PhistucK <phis...@gmail.com>; Chromium Extensions <chromium-...@chromium.org>; Frank <fxte...@gmail.com>
Subject: Re: [crx] How to edit a web page IN-PLACE?
 

hrg...@gmail.com

unread,
Jan 22, 2022, 3:59:05 AM1/22/22
to Chromium Extensions, Frank, hrg...@gmail.com, PhistucK, Chromium Extensions
First of all: How do I see if Design Mode is currently ON or OFF?

Change the bookmarklet to this:
javascript:alert(document.designMode=document.designMode=='on'?'off':'on') 

You''ll see an alert message with the new state of the design mode.


When I switch back from Design Mode to "Normal" mode the red underlines in web page text do not vanish.

This is an ancient bug that's been there since spellcheck exists in Chrome.
I went ahead and reported it just now.


Frank

unread,
Jan 22, 2022, 10:34:18 AM1/22/22
to Chromium Extensions, hrg...@gmail.com, Frank, PhistucK, Chromium Extensions
Ok, thank you.

You filed a bug that spellcheck is not AUTOMATICALLY disabled.

But is there (as a workaround) a way to manually (in a second step) disable spellchecking?

hrg...@gmail.com

unread,
Jan 22, 2022, 3:25:46 PM1/22/22
to Chromium Extensions, Frank, hrg...@gmail.com, PhistucK, Chromium Extensions
Spellcheck must not be disabled automatically when design mode is turned off. These two properties are independent from each other.
The bug is that the spellcheck red underlines are visible even when the text is not editable. This should not happen.

You can force those red underlines to disappear by disabling spellcheck in the entire page:
document.body.spellcheck = false

But this will also affect text fields such as <input type=text> and <textarea>. This is not what you want.
And this may also not work if one or more child elements set spellcheck=true, because the spellcheck  property is inheritable.

Jackie Han

unread,
Jan 22, 2022, 3:42:57 PM1/22/22
to hrg...@gmail.com, Chromium Extensions, Frank, PhistucK
1. Open DevTools(F12) is a simple way, but that's not what you want.

2. In devtools console or a bookmarklet, execute document.designMode='on' is another simple way as hrg.wea said. document.body.spellcheck=false; can disabled spell check globally if elements don't set it.

3. Use an extension, like VisBug. You can select(inspect) an element like a paragraph, then delete it. You can also edit text directly, I found it also has the spell check issue because it's chrome built-in, but when clicking the "search" button of VisBut, the spell check tip can disappear in my test.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
Reply all
Reply to author
Forward
0 new messages