Buidling an Extension to Trigger an onClick Action in the website? - javascript

I'm new to google chrome extensions, but I'm quite familiar with HTML and some javascript. My main area of expertise is Objective-C (but that's a different area).
I wanted to build a chrome extension where I want to replace a website's button with a different custom button (The button uses a specific class/ID). For example if a website were to have a button that said "Tweet Us" I would want to change it to "Email Us", change the onClick action and the button image.
I was wondering if anyone knows of any tutorials or samples that touch on this. Most that I've ran into focus more on building UIs by the bookmark browser, but I don't really have use for that.

Start with reading this.
Add to the manifest.json the URL you want to manipulate under "matches".
Also add to the manifest.json your JavaScript + css (under "content_scripts").
In the JavaScript write some code that deletes the current button and replace it with your button and
your event for that button.
The easiest way to write it is with Jquery.

Related

Javascript automation to add add-on tool to the toolbar in Acrobat

Hello everyone,
I am a complete beginner in developing Acrobat functionalities, and I had been given a task of adding a button to the toolbar, which on pressing would display a pop-up, using Javascript. I was able to add a button to the add-on toolbar and then I manually added the button from the add-on tools to the toolbar. I have been asked if this manual addition could be automated, I went through the Javascript API reference and found that it provides the execMenuItem method but it only is able to perform some commands such as Save As. Could it be possible to write a script that would automate the manual addition ? The manual addition that I am talking about is Going to View -> Show/Hide -> Toolbar Items -> Customize Quick Tools
I am aware that we can add a button to the toolbar directly using plugins but that would require developing in C++, and our team is trying to explore functionalities that could be achieved using JS scripts
Thanks
You can use addToolButton() from page 100 of the JavaScript for Acrobat API Reference to achieve similar functionality.
However it appears that adding to Quick Tools is not supported through the JavaScript API, according to one AcrobatUsers post:
Note that as of version X you cannot place a button on the toolbar automatically, no matter what code you write - it will ALWAYS appear on the Tools Pane, down at the bottom corner - from where the user has to manually drag it into the Quick Tools area.

Web extension - alternative to notification with button

I have a web extension that lets any website access the clipboard. On request I will ask the user if it is okay to give access to the clipboard.
I do this in two ways
I create a notification
The problem: firefox doesn't allow buttons, so in the message I say "Click here to allow website x access". I added an eventlistener to the notification that sends a message back to the content script and it proceeds from there. It's okay but not really the best solution (I want buttons)
As a fallback I have a simple confirm box.
The problem: it doesn't really look good.
Now my other idea is to create a custom confirm box. That means create some html, css and javascript and append it to the DOM. This although is potentionally dangerous as websites can just trigger a "click" on the "allow access"-button then.
So I am basically looking for a nice and safe way to get confirmation from the user.
So what next? iframes? Is it possible to include an html page from the addon with access to a content script in an iframe?
Or is there some other way I can implement this maybe web extensions already offer something like this?
Completely overlooked the click event argument. There is a event.isTrusted property which is false when the event was triggered. (maybe not available in all browsers). But this pretty much solves the issue.

How to trigger a click event of a button with javascript on an arbitrary site

I need to navigate through a particular website, frequently, to get at some sub-page that is several layers beyond the front page and it is taking too much time to click and scroll and click and scroll to get at the desired final screen where I enter the search string. So, I would like to automate the process by making Javascript trigger the right button events to get me to the distant page where I can enter the search string manually.
So, I know how the code needed to trigger the event,
document.getElementById('x').click();
but how can I implement this inside my browser, since this is not my own website?
If this is going thru different pages, then probably a Web UI automation tool would be the best (like Selenium - http://www.seleniumhq.org).
as #elcarns says, if you need to inject code into another's website, you could do so opening the console (view --> developers --> javascript console in Chrome).
Another, more complex way to do it when you have to traverse several pages is by developing a plugin.
javascript:document.getElementById('x').click(); in the url bar. You can probably make a bookmarklet for it as well.

Adding a button in CKEditor for KCFinder

I have CKEditor running with KCFinder integrated and working, but the application will be used by people with little-to-no computing experience and I would therefore like a button in the CKEditor toolbar which looks like the current Image button but jumps straight to KCFinder.
If you imagine looking at CKEditor, clicking "Image" then "Browser Server", I'd like to basically cut out the middle step of CKeditor's initial popup.
Ideally though, users would still be able to right-click on the image and click "Image Properties" to view CKEditor's popup.
Any help appreciated!
Requires a custom plugin and cannot be accomplished as easily as hoped.

Initiate click event for every instance of an element

I am trying to initiate a click event for multiple instances of an element with a javascript bookmarklet. My goal is to be able to click on the bookmarklet and have it delete specific elements, such as whenever a button says remove. Could you help me with this please, I have tried vark.com and other sources to find this answer.
My goal is to achieve this in Google Chrome, can you help me?
Updated: Here is a more detailed explanation
<a class="page_link" title="Visit Page" href="http://www.jitbit.com/macro-recorder/versionhistory/" target="_blank">Version History - Macro Recorder, Macro Program, Mouse...</a>
This can be found by having PageMonitor installed in Chrome, clicking options and inspect element where it shows the name of the site you are monitoring.
Example:
Version History - Macro Recorder, Macro Program, Mouse...<--- This is the link
advanced rename remove Last Check: 11 seconds ago.<--- These are the options
Perhaps nodes was the wrong term, let me see.
remove
Where it says remove, I would like to initiate a click event that will press the Remove button every time it occurs Screenshot of PageMonitor options window
Thanks for explaining what you want to do. Unfortunately, I don't think this is going to be possible. Playing with PageMonitor, it doesn't appear to be possible to execute javascript in the address bar (necessary to make a bookmarklet) and have it affect the extension page.
The code to implement the feature you want is very easy though, and they could probably just add it to the extension if you asked them to. Here's the code:
$('.stop_monitoring:not(:first)').click()
Sadly, as I said, I don't think you can bookmarkletify this due to zone restrictions. Unsafe browser JS is run in a different zone from trusted extension JS. Hope this helps. :/

Categories