Opera recently announce their sidebar extensions.
In their boilerplate they load a URL into an iframe, similar to this:
http://julip.co/2010/01/how-to-build-a-chrome-extension-part-3-loading-any-web-page-in-a-popup/
I aim to make a universal wrapper extension for loading other installed extensions to the sidebar and I tried loading a "chrome-extension://" url to the iframe but it didn't work (Got a "This webpage is not available" page instead).
iframe.src = "chrome-extension://ggfngijafepjalmbhefafhdeedobcdbf/popup.html";
I got a feeling its due to security restrictions but does anyone know of other ways to load another extension's popup in another extension's popup?
Or theres no way at all?
Unless the extension specifically allows to load its files in "web_accessible_resources", you can't access them.
Even if you did, you probably break lots of assumptions that extensions have; it's not a good idea.
Related
I'm making a Chrome Extension which changes the layout of a website. When my extension is activated and the website loads, you can briefly see the real website then it switches to my modified version loading in all the CSS and JS from the Chrome Extension. Though I've used other extensions that do something similar but have it displayed before anything actually shows the real website. One example is Shine for Reddit. When Reddit shows, it shows the extensions version of the website right at the start. How can I do this?
I'm looking for a way to whitelist fonts that pages in Chrome can use. In Firefox I would just simply disable Allow pages to choose their own fonts, instead of my selections above in content settings but Chrome seems to be keen on letting web designers force ugly and often unreadable fonts on us.
I don't want to use * { font-family: sans; } style in Stylish, because I want to keep sans (or serif) and monospace sections, and web designers, insane as they are, usually keep those at the end of the font-family list.
I've done my research and I still can't figure out how to do it via Chrome extension API.
I considered intercepting requests for CSS files and modifying them in response but this isn't possible via current API.
I could also traverse the DOM tree, inspect CSS on each node and replace it appropriately but it'd expensive. Moreover this wouldn't work for pages which build the content from JavaScript. So I'd have to use MutationObservers and that would be way too expensive.
If I could somehow read CSS files that the current tab is using, I could collect the rules with font-family style and inject appropriate <style> element into the page via content script. But I couldn't find a way to read those CSS file via current API. (I'd also have to read <style> rules embedded in HTML but that's doable).
I could also do it via some proxy but I'm not sure how to (securely) cope with SSL.
I could get close with fontconfig. It gets rid of Arial but doesn't work for external (and usually most ugly) CSS fonts.
Is it possible to achieve my goal via current Chrome extension API? How? If not, what would be the workaround?
I don't care about inline styles and styles set from JavaScript. I can live with those. Vast majority of pages I'm concerned about use styles from external stylesheets.
EDIT
wOxxOm's advice to modify document.styleSheets is the way to do it and I've made a simple extension that worked on all sites! Unfortunately, in current Chrome, CSSStyleSheet#cssRules returns null for stylesheets loaded outside of page origin https://code.google.com/p/chromium/issues/detail?id=45786. T_T
(I'll of course publish the extension on GitHub and post the link here after I polish it).
EDIT 2
As wOxxOm suggested, blocking web fonts is also an option (though less ideal I'd say) and there even exist good open source extension for it https://chrome.google.com/webstore/detail/disable-web-fonts/olmabeadgbpmhllgdkemfdnmkngkbkeg. It needs some white list for iconic fonts though. Local fonts can then be managed via fontconfig.
This issue is probably related to ugly looking web fonts https://code.google.com/p/chromium/issues/detail?id=173207.
EDIT 3
I ended up with this nice (and open source) extension https://chrome.google.com/webstore/detail/font-blocker/knpgaobajhnhgkhhoopjepghknapnikl. It's a blacklist but that's enough for my needs and it works with iconic fonts. As far as I can tell, to implement a font whitelist extension I'd have to be able to enumerate all fonts loaded by a web page and that appears to be impossible in current Chrome (see first edit).
After many hours of research, I've seen multiple ways to do similar things. But I don't want to pigeonhole myself into approaching this in the wrong way, so I would appreciate any advice on how to achieve the following.
When clicking on my extension icon, I want to load a toolbar onto the current page. This toolbar has a number of links and forms that can:
Interact with the original page (DOM Listeners, changing the DOM)
Create additional extension popups on the original page
Make requests to external resources
From a JS perspective, I think it would be easiest to inject all my own HTML directly on the page and handle functionality via one content script. I abandoned that approach after realizing I'd never be able to account for all CSS conflicts in my popups.
So instead, this is what I have so far. When clicking on my Extension icon, I inject a div into the current page and load up an iframe sourced to a popup.html via chrome.extension.getURL('popup1.html'). This is where I get stuck. By loading my content into an iframe, I have isolated any CSS issues. But say I have text selected on the parent page and I click a button in my popup1.html. Is there then a way to pass the selected text back to the popup1.html or to show that selected text in a new popup2.html?
I hope that once I get the workflow down on how to do this kind of interaction I can move on with development. Thanks for your help!
I have a Chrome extension that opens a number of tabs, which it keeps open and uses to display data. I want those tabs to close when the extension is disabled or reloaded. My initial thought was that background.html would be unloaded when I restarted the plugin, but I can't seem to get anything that involves this to work. Any suggestions?
Chrome automatically closes pages with chrome-extension://<your_extension_id>/local.html urls (pages from the extension directory) when an extension is disabled. So if you can display your data using those pages - they will get closed. If it is some external site you are displaying - maybe you can make a local stub page with iframe and load your external site there.
Otherwise I can't think about any other way (besides having another extension watching this one).
i dont' know so much about chrome extensions, but, I think you are openning new windows by something like var w = window.open(params), so, you can close the window with w.close().
if not, ignore my answer :P
I am in charge of creating plugins for all major browsers which will hijack links from specified website visited. I wonder if this can be done by any plugin. I mean if plugins has that level of control over the website visited by the browser under my plugin supervision?
When I say hijack it means, I should be able to read the anchor tag's href attribute value and to modify it accordingly. I know how to do that in Javascript and I know Google Chrome extensions are written in HTML, CSS & Javascript so this seems to be working. Will it work for IE, Firefox, Safari?
After huge research I got to know this is possible in Chrome, Firefox and IE. I am still researching for Safari.