Inject style in chrome-extensions:// using Tampermonkey - tampermonkey

What i basically want is
inject filter:invert(1) into the default pdf reader extension of chrome
// ==UserScript==
// #name Dark mode pdf
// #namespace http://tampermonkey.net/
// #version 0.1
// #description try to take over the world!
// #author You
// #match chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/index.html
// #icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// #grant GM_addStyle
// ==/UserScript==
(function() {
GM_addStyle("embed{filter:invert(1);}");
})();
i tried this but it didn't work && if you press ctrl+shift+i on the pdf reader page thenthese show rather than the one i want to edit in, to get those i need to right click on the pdf then go to inspect meaning inspecting the embed. So can anyone help with this script, or tell how to inject style in embed of extension.

I don't think tampermonkey is allowed to alter a binary viewer extension
JavaScript programs that can be used to modify web pages.
PDFs are NOT web html pages they are Application/pdf so run outside of the html, they need to "Do it Themselves" here in a FireFox extension pressing I I can invert the binary view of this page as HTML OR PDF, should be the same in Chrome's Foxit extension, but dont think they added that yet? You will need to alter the exe or dll.
Here too the online web page can be at a click inverted in the binary view, however, I do not recommend online web html as a good experience in a pdf viewer as Stack Overflow complains Windows app browsing is out of date (Win 11 still uses Trident), and its very slow.

Related

Access GM_getValue outside of script

Basically the question title. It would greatly benefit me. I want to be able to access GM_getValue outside of my userscript for debugging purposes, or, at the very least, the values and names themselves.
I am in Chrome on Windows 10.
Latest Tampermonkey beta (and eventually normal Tampermonkey) displays the GM values in its dashboard script editor in Storage tab.
Visual method: use Storage Area Explorer extension:
Open the Tampermonkey dashboard page and invoke devtools by F12 or CtrlShifti
In Storage Area Explorer panel scroll to the bottom to find the #uid# of your script by name, then find its data in #st# key with that UID:
Dumping in the console:
One-time setup: add a new code snippet in devtools - Sources - Snippets subpanel and save it:
function dumpGM_data(scriptName) {
chrome.storage.local.get(null, data => {
const UID = Object.keys(data).find(k => k.startsWith('#uid#') &&
data[k].value == scriptName);
if (UID)
console.log(data[UID.replace('#uid', '#st')].value.data);
});
}
Open the Tampermonkey dashboard page and invoke devtools by F12 or CtrlShifti
open and run that snippet: CtrlEnter - it'll be usable until you close the dashboard page
invoke it in the console:
dumpGM_data('SE Preview on hover')
Inspect/dump/edit the database file directly:
Use any LevelDB tool you can find (or compile one yourself) on the ldb database file under Chrome user profile directory in Local Extension Settings/dhdgffkkebhmkfjojejmpbldmpobfkfo or Local Extension Settings/gcalenpjmijncebpfijmoaglllgpjagf for Tampermonkey beta.

Translate PDF file using Google Translate API

I want to use Google Translate in my project. I completed all the formalities with Google. I have the API key also with me. With this key I can easily translate any word with JavaScript. But how to translate the PDF file as we can do in Google Translate site? I found one thing like this:
http://translate.google.com/translate?hl=fr&sl=auto&tl=en&u=http://www.example.com/PDF.pdf
But here I cannot use my key, as a result it takes so much time to translate. So I want to use my Key and translate a PDF file. Please help me out.
My approach is like this:
1. One html page I have.
2. One browse button for pdf
3. Upload the file
4. Transalte the pdf with Google API and show in the html page.
I searched it for this pdf translate with but did not find anything. Please help me out.
TL:DR: Use headless browser to render a PDF from the Google's PDF translation service.
PDF is a complex format and can include many components that are text. To translate it I will describe solution from easy one to more advanced.
Translate raw text
If you only need the translation without the visual output, you can extract the text and give it to Google Translate.
Since you did not provide information on your project (language, environment, ...) I will redirect you to this thread on how to extract text
Translate all text
If you need to get text from everything in your PDF, well that's pretty hard. To avoid headache (partially) you can convert the PDF to an image (using imagemagick tools or similar) and then you have three options:
OCR the text from the image, then give it to google, again you are loosing the original form.
OCR the text, but saving the position (some libraries can do that, again since you did not specify your project information, see theses links: #1, #2, #3, #4).
Then translate it with google api, and write the result to the image. For great results you need to take account of text font, color and background color. Pretty difficult, but feasible.
Translate the image using google translate image service. Unfortunately this feature is not available in the public API, so unless doing some reverse engineering, this is not possible.
Translate using Google's PDF translation service
The solution you provide by using the translate site can be automated quite easily. The reason it's long is because it is an heavy process and you probably won't beat Google.
Using an headless browser, you can get the translation page with your pdf, then observe that the translated content is sitting in an iframe, get that iframe and finally print to PDF.
Here is a short example using SlimerJS (should be compatible for Phantomjs)
var page = require("webpage").create();
// here you may want to setup page size and options
// get the page
page.open('https://translate.google.fr/translate?hl=fr&sl=en&u=http://example.com/pdf-sample.pdf', function(status) {
if (status !== 'success') {
console.log('Unable to access network');
} else {
// find the iframe with querySelector
var iframe_src = page.evaluate(function() {
return document.querySelector('#contentframe').querySelector('iframe').src;
});
console.log('Found iframe: ' + iframe_src);
// render the iframe
page.open(iframe_src, function(status) {
// wait a bit for javascript to translate
// this can be optimized to be triggered in javascript when translation is done
setTimeout(function() {
// print the page into PDF
page.render('/tmp/test.pdf', { format: 'pdf' });
phantom.exit(0);
}, 2000);
});
}
});
Giving this file: http://www.cbu.edu.zm/downloads/pdf-sample.pdf
It produce this result (translated in French): (I posted a screenshot since I cannot embed PDF ;) )
Use Apache Tika to extract the text content of the pdf file(you should write the necessary java code), then use whatever API you want to use to translate it. But, as it has been mentioned above Google Translate is a paid service.

Twitter Widget Cordova Application Pop up

I am working on integrating twitter Widget in a tab of a Cordova application. I am using Cordova with Angularjs and ionic Framework.
I have obtained the API key needed in order to instantiate the widget and after a few attempts I got it. I attach one image (twitter in tab)
In order to do that, I create a tab, put the javascript in the main .html file and the link. So far, ok:
<a class="twitter-timeline" href="https://twitter.com/hashtag/mwc2015" data-widget-id="XXXXXXXXXXXXX"></a>;
But, the "show" begins when the user clicks on the twitter widget.
If you want to retweet, tweet something or whatever, twitter widget opens a new page, pop up, which is placed on top of cordova app, and then, user can not go back.
Device Back button doesn't work.
You can register and send a tweet, but always this new window is on top.
I attach an image to show what the user see in the screen when any button is clicked. twitter on top
So, you should kill Cordova app and start again.
I was wondering if someone knows how integrate the widget and the "children " pages of them , or if a javascript alternative to change target parameter of all links inside widget.js in order to open new windows inside the app.
Thank you so much.
I have experienced the same issue with Instagram, but I hope it can help as well. First of all, please install cordova InAppBrowser plugin.
cordova plugin add cordova-plugin-inappbrowser
Then try to modify your config.xml file with following, adding it before platforms tag:
<allow-navigation href="about:*" />

Ionic / Cordova with embedded video takes over web view

In a simple Ionic app I have a plain web view with some embedded videos. These embedded videos are included with an oEmbed iframe. Video works fine, but almost every video provider has a link to watch the video on the provider's page. For example Youtube always has a button 'watch on Youtube'.
When my users (accidentally) click that link, the whole Cordova web view is taken over by the linked URL. Instead of my app it shows the Youtube video. Then the user never gets to go back to my app, except by closing and opening the app.
I've tried to:
Prevent navigation by watching $locationChangeStart, that doesn't work as it doesn't fire for external URLs (like Youtube's).
Prevent navigation by using window.onbeforeupload, but that doesn't suffice as it doesn't guarantee the user navigates away and it presents an ugly confirmation popup.
Any other ideas on how to prevent navigation to external URLs from an Ionic/Cordova app would be highly appreciated.
You should provide more info, how do you insert the videos? some code?
I don't use videos, but I had a similar problem with google maps, if the user clicks the legal link, the page nativate to the google legal page and the user can't go back.
To fix this, I installed inAppBrowser plugin and used this code to open the legal page inside the inAppBrowser window
$('#map_canvas').on('click', 'a', function(e){
e.preventDefault();//you prevent the default click
window.open($(this).attr('href'), '_blank');//you open the link on the inAppBrowser window
});
So you should inspect the video to see if you can do something like this, preventing the link click and opening it on the inAppBrowser plugin
You will have this problems using externa players, a possibel solution would be to host the videos on your server and use some jquery/angular video player.
insert
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
in your index.html. So when you open a link,it'll use your device browser.You can come back from the device browser to your application with android back button.
You should probably give your url's like this
var ref = window.open('https://www.******.com/', '_system', 'location=yes');

Creating the view as PDF in sencha touch

My requirement is after user taps createPDF button,to generate current view as PDF. Using
console.log(this.getMain().getActiveItem().renderElement.dom.innerHTML);
i can able to get entire HTML element. Now i stuck to generate my view as PDF. Any suggestion
You should google pdf viewer.
For example, if you wanted to view the PDF at the URL http://research.google.com/archive/bigtable-osdi06.pdf ,
you would use the URL: http://docs.google.com/viewer?url=http%3A%2F%2Fresearch.google.com%2Farchive%2Fbigtable-osdi06.pdf
then use HTML object tag and pass the url to "data" attribute. Attached this as html in your view.
Thanks
You have two options if you are working in a browser, (if you are working in mobile devices you should working with inAppBrowser cordova plugin)
1º With the mozilla-pdf library: http://mozilla.github.io/pdf.js/
2º With the pdfObject library: http://pdfobject.com/instructions.php
Both libraries are very complete to work with the browser but the mobile devices are other mistake...

Resources