How to edit current viewed page html source using Chrome extension? - google-chrome-extension

I want to build a chrome extension that hides a specific div (with id) from page on load.
I want to know how to edit the source?

Just use jQuery, and write this code in your content script:
$("#you_div_id").hide();
It's so easy:)

Related

Intercept Chrome translating with js

I have chrome extension and auto translate option on Chrome is changing some dates on page, which cause some errors while data processing.
Is it possible to turn of translate of the page, from the content script?
I have tried with appending the element with also tried to add class "notranslate" to .

How can I create a Chrome extension to read the daily Blinkist on one page?

Background:
I would like to create a Chrome extension that allows me to read the Blinkist Daily article on one page. By default, it is split into several pages that I need to navigate through using the navigation controls at the bottom of the article page.
Question:
What are the steps I need to consider in order to develop a Chrome extension that implements infinite scroll (a one-page reading experience) on the abovementioned website?
Why not using simple CSS extension like Stylebot? Just show the hidden chapters and adopt the look so that it pleases you. Stylebot also allows sharing that style with others...
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

How can one debug the Chrome extension "options" page using the new OptionsV2 method?

https://developer.chrome.com/extensions/optionsV2 tells me that I should be using options_ui in my manifest, rather than options_page, and recommends I start upgrading immediately.
However, I can't find any way to actually debug the script run by my options page when I use options_ui—the Options popup is in an tag, and the developer tools don't show me the source, or even the HTML content.
For now, I just comment out options_ui and let options_page take effect when I need to debug. I'm guessing that setting "options_ui": {"open_in_tab": true,...} would have the same effect, but it would be really nice to figure out how to actually debug the script when it's running the new way.
Auspex,
Teepeemm's comment is correct.
Other way, you can launch your options page from other tab using its full URL
like,
chrome-extension://{your extension id here}/{your options page path here, from the extension root}
e.g. say my extension id aaabbbcccdddeeefffggg, and say, my options page is located (from extension root) at app/html/options.html; then i can load up below URL in a new tab ---
chrome-extension://aaabbbcccdddeeefffggg/app/html/options.html
Now here, in this tab; you can do your regular debugging around HTML and javascript.
I hope this suffices your debugging requirement for 'new options UI' for chrome.
Teepeemm's comment is correct.
It's as simple as right-clicking inside the options page modal and selecting "Inspect element" - it will open the correct Dev Tools.

How to detect page language/locale in a Chrome extension content script?

I would like my Chrome extension content script to detect the language or locale of the page's content (not the browser language/locale). I assume there is a method for this in the Chrome extension API, but should I be using standard Javascript libraries instead?
This is the Chrome extension method: chrome.tabs.detectLanguage(...). From the description:
Detects the primary language of the content in a tab.
You could use standard javascript DOM functions to look for a lang attribute on the root html element (or possibly the body element). But keep in mind that a page might not be entirely in one language, so different elements of the page may be marked up with different lang attributes.
Also, if you want to support xhtml, I'd suggest looking the xml:lang attribute as well.

How to include custom CSS or Javascript on a Content Item in Orchard

Sometimes I want to add some custom CSS or Javascript to a page but the HTML editor doesn't handle this gracefully, even when using text dialog.
I could use an alternate view but then I have to upload the view file to my host every edit.
Any ideas?
Ok, I found a module (Vandelay.Classy) that does exactly this.
http://orchardproject.net/gallery/List/Modules/Orchard.Module.Vandelay.Classy

Resources