I am writing a Chrome Extension, and instead of having a button in the browser toolbar, I would like to insert a button into Google Docs.
I can't figure out how to insert a button into the Google Docs toolbar using a Chrome Extension. Specifically, how do I inject the button into the Google Docs toolbar as opposed to creating a dialog box or something similar? (I know how to do the latter in my content.js file).
Here is a link to another Chrome Extension that injects a button into the Google Docs toolbar, as I am trying to do: https://chrome.google.com/webstore/detail/draftback/nnajoiemfpldioamchanognpjmocgkbg?hl=en-US
I ended up figuring this out by looking at the content.js file for the extension I linked to in the question.
Within the content.js file of your Chrome Extension, create a button and define the HTML for the button:
var $my_button = $('<div role="button" class="goog-inline-block jfk-button jfk-button-standard docs-titlebar-button">My button</div>');
The class definition uses Google Doc's CSS classes (which I found by inspecting the buttons I wanted to emulate) so that it blends in with the title bar.
Then, use ".prependTo" to inject the button into the Google Docs titlebar.
$my_button.prependTo($('.docs-titlebar-buttons'));
This created a nice button that looks like this:
Related
HiI am trying to develop small simple popup extension in Firefox, I am new to the Firefox extension development Framework.
I used this boilerplate to speed up this process
I Added a small button to the popup with an id = testid1 by overriding the popup.html file and adding this line
<a id="testid1" href="#" class="js-options">Test</a>
I added it the corresponding EventListener by overriding the popup.addEventListener in the popup.js file
popup.addEventListener("click", function (e) {
if (e.target && e.target.matches("#testid1 ")) {
var element_from_popup_html = document.getElementById("elementid1").value;
var element_from_web_page = document.getElementById("elementid2").value;
alert('it work');
}}
I made sure that this event lister triggers correctly and is working by using an Alert.
I am trying to get 2 elements from the DOM Element1(inside popup page), and Element2(Fromthe webbrowser)
I can't get the : element_from_web_page!!
and I have document.getElementById("elementid2") is NULL.
So After digging some more the : document here is the popup.html, How am I supposed to access this webbrowser browsed page. I used to use document keyword for this!!
Also found out that I can use the Javascript API from mozilla by using _ext2.default.and_put_the_chosen_api_here but I only need simple dom find by id?
I managed to solve my problem after reading some more about the Firefox Extensions. So basically what I was doing is managing the popup document not the webpage. In order to interact with the webbrowser current page I needed to change another type of js called a content script, which is different from the popup.js javascript file(similar to the background script) that I was editing.
So basically I had to use the communication between the background and content-script with regards to the documentation.
On the content_script.js , I interacted with the web-page using some eval function.
I am try to create a google extension which will allow me to click on buttons, based on id, with the help of google commands.
I can only find examples of using google commands with the background scripts which does not give me access to the actualy web page on the active tab. The key thing I want to achieve is this:
press Ctrl+Shift+0 and click a button based document query.
I have also thought of injecting content scripts, but that does not let me use the google command api to get shortcuts.
I've been working on an extension for Google Chrome, this is my first attempt.
So far I've been able to run my extension in a new tab, but I wanted to know if there was any possibility to remove the focus from the omnibar/addressbar to some content in the tabbed window.
For Example, I'm implementing an input field or text area, and when a new tab opens, I want the blinking cursor/caret to originate in the said text area, and not the google omnibar.
Any possibility using jquery or any google chrome extension api?
I had the same problem. My solution was to use a "dummy html" file as the new page, and everything this page did was running the following JavaScript code (in an external JS file linked to from the dummy html file):
window.open("the-real-new-tab-page.html")
window.close()
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.
I have a Google Chrome extension that opens a Twitter Bootstrap dialog (using JQuery 1.7.x, but not JQueryUI) from a context menu item click, and I've been trying to do the same thing in the Firefox version (using Add-on SDK 1.6), to no avail.
I can intercept the menu item clicks OK in my lib/main.js, using context-menu, but I can't get a message to the content script (see https://stackoverflow.com/a/8493844/954442) which contains the function that creates the dialog DOM and that displays it. Nor can I create the dialog from my add-on script because there's no DOM there (and attempting to load JQuery into that via #mozilla.org/moz/jssubscript-loader;1 fails with "window is not defined")
I've looked far and wide for examples, but haven't found much that helps. Has anyone got an example of a context-menu Item click opening a dialog?
(What are the advantages/disadvantages of using the Add-on SDK to develop my Firefox extension? is the nearest thing I've found to my issue. I get the impression the poster found an answer eventually, but didn't update the question to say what it was.)
(NB. I'm not prepared to consider XUL, and very reluctant to go back to JQueryUI)
Ok, so I believe you want to do something like that:
https://builder.addons.mozilla.org/addon/1049738/latest/
Basically you add a contentScriptFile property to your context-menu's Item. A content script doesn't share the js variable with the page, however can access to the DOM. So you can add your panel and display it when the context-menu item is clicked.
Notice that you can pass to contentScriptFile multiple files using an Array, so you can load jQuery as well in this way.
Hope it helps.