how to enable Safari Extensions when using a web view - macos

I am using a Web view in my application, instead of open a Safari browser instance, so I noticed that Safari extensions doesn't work. Is there a possibility to enable this feature when using a custom web view in a Cocoa Application?
The reason by which I need to use Safari extensions is to inject javascript to whatever web page is loaded at one moment, so if is there another approach to do it without using extensions, welcome any suggestions or samples.

There's no way to use Safari extensions in a web view.
If your script isn't too big, how about formatting it as a "javascript:" bookmarklet and setting the web view's location to it?
[Edit: Stuff below added in response to questioner's request for "a bit more about that technique".]
Say you want to change the background color of the page to yellow and all the text to red. The javascript to do that would be something like:
document.body.style.backgroundColor = "yellow";
document.body.style.color = "red !important";
To turn the script into a bookmarklet, you just:
Wrap it in an anonymous function,
remove all line breaks,
(optionally) remove any unnecessary spaces,
url-encode it,
and prefix the whole thing with "javascript:".
So, the example would become:
javascript:(function(){document.body.style.backgroundColor%3D%22yellow%22%3B%0Adocument.body.style.color%3D%22red%20!important%22%3B%0A}());
Then you can set the webview's window.location to that string to "run" the bookmarklet.
Here is a page with an automatic script to bookmarklet converter that seems to work.

Related

How to display popup with html in firefox bootstrapped extensions?

I developed a firefox bootstrapped extension (without add-on sdk). I need to display a popup with html content, something like panel in add-on sdk. Also, it is necessary that the extension could interact with content in the popup. Also, I need a way to display html content in separate tab and interact with this content. So what can I use to implement what I need?
You can append an iframe to that panel, and then load a page into that iframe. That's what I did in this simple addon here - https://github.com/Noitidart/AwesomeBar-Power-Tip/
Here's another gist that does something similar - https://gist.github.com/Noitidart/9445992
I think this is how the SDK does it as well.
but I can not understand how it is possible to implement the interaction between expansion and content inside the panel.
The panel or its frameLoader property should have a messageManager, which can be used to load frame scripts and pass messages to them.

How to disable firefox's reader view from my website?

Today i updated my firefox to the latest version and one big feature is the reader view for desktop. We launched a webshop two weeks ago and now there is this tiny "reader view" icon. When i click on it i get an error-message. My team-leader wants me to remove this feature when visiting this site.
is it possible to remove or hide the "reader view" feature from firefox when visiting my site?
There is currently no legit way of disabling Reader View for your website. Reader View is supposed to automatically detect on what pages it should be available and on what pages it should not.
If there is an issue with your website, your best option is probably to report it there: https://github.com/mozilla/readability/issues
You can also find more info about the issues affecting Reader View in Firefox there: https://wiki.mozilla.org/QA/Reader_view
Although I would not recommend it, there might be a way to fool Reader View into thinking it should not parse your website, if you really need to. A quick look at the source code reveals that it will not parse certain type of documents, certain URIs and malformed URLs. You would need to dig in the source to understand how/if your site can safely be adapted to avoid being parsed. The Reader View source code can be found here: https://mxr.mozilla.org/mozilla-release/source/toolkit/components/reader/ReaderMode.jsm or
https://dxr.mozilla.org/mozilla-release/source/toolkit/components/reader/ReaderMode.jsm
This Question shows how to Optimize website to show reader view in Firefox. So you have to ensure that your site is not optimized for the Reader View.
Don't use formatting options that are favoured for the Reader View and so on.
I guess this will suffice:
Don't use the <p> Tag
write all Textblocks in small portions
Here are some more details about the mechanism
Replace p tags with div tags in your page. It worked for me, even when I have div tags with pre tags (preformatted text) on the same page.
There is no way of forcing disabling the Reader View to the user, But if it is important to your site, you can notify the user to disable or not use the reader feature of firefox.
This would be the way to Disable the Reader on the users browser
in the Enter about:config in browser address bar
click the "I'll be careful I promise" box
search for reader.parse-on-load.enabled
toggle preference to false (right click > toggle to false )
close the about:config page > refresh browser > reader view icon has gone
put this code on your css code and you are done !
/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,
img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,
audio,video,adnav,adheader{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}

Opening a bar on top of the page with firefox sdk

I am making a firefox pluggin and I want to open a "topbar" on a few websites. Realy, it would be a few informations about the curent page a link back to my own website. What would be te best way to do that ?
My first idea was to use content script, but that seems to be a very bad practice. I also read about panels, here are my questions :
How can I add my pannel just under the adressbar ?
How can I only open in it on the website I need ?
thx.
Using content script is completely fine.
It is modern, simple, less-code, more compatible way
to add top-panel to some web pages.
Also, code of content script is not injected to the web page, it just uses the dom and context; page script has no access (if you do not provide it explicit) to content script.
The only possible disadvantage is that panel would not look like native part of the browser.
If I convienced you to use content script:
The module you really need in your plugin page-mod
Using Add-on Builder you make have your plugin in a day

Google Chrome escapes WYSIWYG Javascript

So my problem is relatively simple, I've Googled all over to find a solution but I've yet to find one.
The problem is, I've developed a WYSIWYG plugin for Drupal's WYSIWYG module/framework (not sure if this is relevant). The purpose of the plugin is to allow embedding of video files inside the WYSIWYG content. Our client offers a video uploading/editing API which their customers use to embed files on their pages.
To put it simply, my plugin opens up a pop-up where the user selects one of their videos as fetched from their account at the clients site, the plugin then calls the API and is returned with HTML and JavaScript for embedding the video which is then inserted into the WYSIWYG content.
This works like a charm in Firefox, however I have a few problems with it in Chrome. After debugging back and forth I've noticed that the embedded JavaScript inside the WYSIWYG editor gets escaped (IE, quotes turned into &quot etc).
This does not happen with Firefox so it's most likely Chrome which is causing it, or perhaps even Webkit?
I've already checked the HTML and JavaScript that gets returned through the Ajax call and it is fine, it's when it gets embedded inside the WYSIWYG it gets escaped.
The WYSIWYG editor I've tested in is TinyMCE by the way.
Adding as an answer for #tobbr to help other SO users:
i solved this by adding the script to a db table instead and then
loading it using drupal_add_js with hook_nodeapi. works better and
solves another IE related problem

How do I disable Firefox's "Search for text when I start typing" on pages with keyboard shortcuts?

Some web pages such as GMail and Reddit(with the Reddit Enhancement Suite) have useful keyboard shortcuts that I'd like to use. However, whenever I start typing on one of these pages, the first onkeypress event fires, but then the "Search for text when I start typing" search bar opens and blocks further keys.
I don't want to disable "Search for text when I start typing" as I use it on most other web pages. Is there any way to selectively disable it, or to make a keyboard shortcut/bookmarklet to toggle it?
To disable this in firefox, just go to "Options->General Tab->Browsing and disable "Search for text when I start typing". More info here . This is very useful in some cases, for example when you try to play WebGL games or when using pages like Gmail or Protonmail that have their own kb shortcuts.
UPDATED to version 73.0.1- In previous versions of Firefox this is in "Tools->Options->Advanced->General Tab" or in "Preferences->General->Browsing"
This is still an issue huh? I love this feature but It also bothers me every now and then. There are some pages that get it right. I never dug into how they do it. For instance:
zty.pe - JS browser typing game. Would be pretty bad if typing caused searching here. It actually captures the keys just when the game starts and NOT by default on the page.
That is not Firefox or any other browser feature. To do this, you have to write server and client side code.
Catch text that user types into input, and send it using preferably AJAX to server-side script. Then server side script should look up for matches in DB (some search engine), and return possible combinations. All you have to do on client side (JS) is to show returned results in some nice way - like in google - you can use for example simple html lists, but you have to code some css to make it look properly. Also nice feature is to code JS to work on up/down keys and enter for selecting element (it should also work for mouse).
It's not very simple to do by yourself, but you have now idea how to do it. You could also google for some scripts - surely there is something :)
Good luck!

Resources