-
Notifications
You must be signed in to change notification settings - Fork 81
Element picker
- Back to Wiki home
The element picker can permanently remove elements on a web page by using it to create a network or cosmetic filter. The element zapper can temporarily remove elements on a web page without creating new filters.
Open the extension's popup menu and click the small "eye-dropper" icon to enter the interactive element picker mode.
Point and click on the element you wish to remove.
After clicking on the element, a modal dialog box will appear, allowing you to select and optionally edit and create a filter to remove it.
Tip: You can conveniently move the element picker dialog box out of the way by using the mouse to click and drag on the empty space between the Preview and Create buttons.
If possible, one or more network filters may get suggested, as well as a list of cosmetic filters. When you click on one of the filters, you will see what effect it will have on the web page. Also, ensure the selected filter will not remove any additional elements on the page meant to stay.
When you select a cosmetic filter, two sliders will appear that let you further adjust the suggested filter.
The slider on the left-hand side is to adjust the depth of the elements to target. For example, filters with lower depth typically remove large areas of the web page.
The slider on the right-hand side is to adjust the specificity of the filter to create. For example, higher specificity tends to cause fewer elements to be filtered (down to a single one), while lower specificity tends to cause more to be filtered.
Adjust as needed to pick the filter that best matches what you wish to accomplish. (Demo Video)
You may manually edit the filter, but the result needs to be valid and match at least one element on the web page, or you will not be allowed to create a filter.
You may quit the interactive element picker mode by clicking the Quit button (or pressing the Esc key). You may close the modal dialog and pick an element again by clicking the Pick button.
To enable the Create button, you must first create a proper filter in the text area. Once you click the Create button, the element picker will add the necessary tokens to ensure that the filter only applies to the current website and save it to your custom list.
- Swipe right to exit element picker mode.
- When the dialog is visible, swiping right will hide the element picker dialog (this will make it dimmed and transparent).
- When the dialog is hidden, swipe right again to exit element picker mode.
- Swipe left to make the dialog visible again.
There may be many different reasons for this.
- If this is a network filter, you may need to bypass the browser cache when you reload the page by holding down the Shift key when you click the reload button.
- The URL or selector for the blocked element contains variable parts that change each time a page is loaded.
- If this is a network filter, you may need to manually edit the filter to use wildcards for the parts of the URL which are variable.
- If this is a cosmetic filter, you may have to manually craft a better CSS selector. Sometimes this requires observing the surrounding DOM data.
- Cosmetic filtering is disabled for the site or globally. There are many ways to disable cosmetic filtering:
- The per-site cosmetic filtering switch.
- The option "Parse and enforce cosmetic filters" is unchecked in the Filter lists pane in the dashboard.
- You unchecked My filters in the 3rd-party filters pane in the dashboard.
- There is a static filter in one of the 3rd-party filter lists that counters your filter.
- Exception cosmetic filters (
#@#
) cancel cosmetic filters (##
). - Exception filter with
elemhide
orspecifichide
option.
- Exception cosmetic filters (
- The site you are trying to use the element picker or element zapper on is unsupported:
- Unsupported pages: Privileged Pages. Also, see this related issue.
- Unsupported protocol: The element picker and element zapper are restricted to work only on the
http(s)://
protocols. For example, it will not work on thefile:///
protocol, but manually adding cosmetic filters to the My Filters pane is still possible. Related issues: Issue 1 and Issue 2. Related comments: Comment 1, Comment 2, and Comment 3.
- Wiki home
- About the Wiki documentation
- Permissions
- Privacy policy
- Info:
- The toolbar icon
- The popup user interface
- The context menu
-
Dashboard
- Settings pane
- Filter lists pane
- My filters pane
- My rules pane
- Trusted sites pane
- Keyboard shortcuts
- The logger
- Element picker
- Element zapper
-
Blocking mode
- Very easy mode
- Easy mode (default)
- Medium mode (optimal for advanced users)
- Hard mode
- Nightmare mode
- Strict blocking
- Few words about re-design of uBO's user interface
- Reference answers to various topics seen in the wild
- Overview of uBlock's network filtering engine
- uBlock's blocking and protection effectiveness:
- uBlock's resource usage and efficiency:
- Memory footprint: what happens inside uBlock after installation
- uBlock vs. ABP: efficiency compared
- Counterpoint: Who cares about efficiency, I have 8 GB RAM and|or a quad core CPU
- Debunking "uBlock Origin is less efficient than Adguard" claims
- Myth: uBlock consumes over 80MB
- Myth: uBlock is just slightly less resource intensive than Adblock Plus
- Myth: uBlock consumes several or several dozen GB of RAM
- Various videos showing side by side comparison of the load speed of complex sites
- Own memory usage: benchmarks over time
- Contributed memory usage: benchmarks over time
- Can uBO crash a browser?
- Tools, tests
- Deploying uBlock Origin
- Proposal for integration/unit testing
- uBlock Origin Core (Node.js):
- Troubleshooting:
- Good external guides:
- Scientific papers