building chrome extension to read selected words from a web page - google-chrome-extension

I would like to build a chrome extension to allow me select any word from any web page and by clicking a menu item to send it to a service of my company for tracking.
for example, if I am now reading some article on a page, I would like to select a specific word and right click on it, then I would like to make an http request to my service and track this word.
Is it possible to do with chrome extension? can you please link me to a tutorial that can be helpful?
Thanks.

Yes, you can use chrome extension to achieve that.
Refer Official Tutorial for more details.
Per your requirements, you may need:
Select a specific word. window.getSelection()
right click on it. You will need to listen to mousedown, mouseup or contextmenu event, the code looks like
document.addEventListener('contextmenu', function(event){...}, false);
make an http request. You can use XMLHttpRequest to transfer data between client and server.

Related

Chrome Extension overwrite existing webpage

I will try to make this as short as possible. I am making a Chrome extension and I wanted to have an integrated settings tab so users can customize their experience. Now, I want this settings tab to be somewhat of an "extension" to an existing settings tab in a website. Let me explain.
The website I am talking about is Roblox.com, a popular gaming platform. When logged in, you have the ability to visit your settings, which look something like this:
Now, in order to navigate the different setting "tabs," you simply click on a button and it takes you to another change. The URL corresponding to each page is https://www.roblox.com/my/account#!/TAB_NAME, with TAB_NAME being the name of the tab. What I want to do is make my own "tab" where once the player clicks, it will bring them to a settings tab where they can tweak the extension's settings. This would look something like this:
I am fully aware on how to this (inject a button into the list and customize said button), but what I don't know what to do is make it so that once the button is clicked, it will not redirect you to another website, but will simply "switch tabs" like it would with any other setting. There is an extension that already does that called "Roblox+", where it adds a button to the list, and once clicked, it takes you to a similar-looking page with the URL https://www.roblox.com/my/account?tab=rplus#!/info. From my understanding, since the tab name isn't a header, the URL does not change, which allows for a custom webpage. Now, if you were to paste that URL in a browser without the extension, then it would simply redirect you to the "Account Info" tab (although the URL remains). Here is how the Roblox+ extension settings page looks like:
Now, from what I can assume, what happens is that right after the normal account information page is loaded, it removes all the HTML elements that are related to the account information tab and re-creates the entire page using custom HTML elements. That is something similar to what I want to do. Regardless of this, I do have one question. Is it possible to somehow "overwrite" a certain domain so that, let's say, the URL https://www.roblox.com/my/account#!/my_plugin_settings led to my custom page (even if that means that the page is made from an HTML file) instead of where it was supposed to lead? If that isn't possible, would it be better to create a custom settings page outside of the Roblox website or somehow inject my own into the current settings?
This is the question that I have. Hopefully I explained it well. If someone could assist me on this, then that would be amazing. Thank you for your time and help, I truly appreciate it.

How can I use links in Slack which deep link back into my Slack bot?

I have a Slack bot that, in response to a /command - a search query - can display a list of matched database entries. I would like to present this list as a clickable link + short summary for each of the DB entries (using blocks).
Example:
Clicking the link for any entry should tell the Slack bot to display the full database record as a new Slack message.
I can't figure out how to get a link to do anything other than open the browser. None of the options for deep linking, or linking to a bot mention appear to be suitable.
Can anyone think of a solution for this? I would prefer not to give each list entry a button or accessory to 'open' the link.
already tried :
Each item as an https:// link to the node app behind the bot, passing the title to be displayed. This works but opens a browser window in the interim.
Mentioning the bot in a link <#ABOTID>Title to open
You can only deep link to existing messages, but not use links the same way you can use buttons.
You could of course link directly to your app, but that would always also open the browser, which as you say you don't want.
So for blocks you are left with the option you already mentioned: putting a button next to each entry in the form of a Section with a button.
An alternative would be to use Secondary Attachments. Those are automatically collapsed for longer text and the user gets a button he can click to expand them.

Can Chrome Extension’s new options_ui trigger a page action?

I’ve been placing a page action on the options page of my Chrome extension. options.js calls chrome.runtime.connect({"name":"someName"}), and background.js has
chrome.runtime.onConnect.addListener(function(port) {
chrome.pageAction.show(port.sender.tab.id);
});
Unfortunately, in the new options_ui with the recommended default (and someday mandatory) "open_in_tab":false, the Sender's tab won't be set. Is there a way to get the tab id in order to show the page action?
I could use tabs.query to get the chrome://extensions/ tab, but that requires the tabs permission, which I currently don’t need. Active tab seems like it would work, but it doesn’t provide the tab id and isn’t enabled by opening an option dialog (source).
(Why do I want the page action on my options page? The extension works with a website that is only available ~7-10 weeks per year. I’d like my users to be able to interact with the extension the rest of the time, so that they can get used to the process. But I don’t want to adjust the displayed extension permissions just to do so. I can accomplish this by having the options page pretend to be the website in question.)

Add application to page

I have a problem when I am trying to add my application to one of my pages. Earlier there has been an option in the left sidebar which simply says view profile application and then you could choose "Add to my page". Now that option is gone and instead there is just an option that says "view application timeline" or something like that. I cannot find how to add my applications to my different pages.
Anyone who have any idea how to solve this problem?
(I'm from Sweden, which explains my bad english)
Thank you!
The short version:
Enter this URL into your browser. Remember to replace YOUR_APP_ID first. There's currently no way to add an application just by clicking a link like before... :/
http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&redirect_uri=http://www.facebook.com
Please see https://developers.facebook.com/blog/post/611/
This explains the recent changes to how Apps are associated with Pages and shows both how to create a community page and link it to an app, and how to use the new 'add to page' dialog
You can also add apps to a page via the API, see https://developers.facebook.com/docs/reference/api/page/#tabs
try my "fix" # http://admine.eu/addapp.html
here is part of the source and actually all you need:
window.open(
"http://www.facebook.com/dialog/pagetab?app_id=" +
document.getElementById("appid").value +
"&next=" +
document.getElementById("appurl").value,
"PageTab","width=1000,height=300"
)
+document.getElementById("appid") is the id of your app
+document.getElementById("appurl") is the canvas or tab URL of your app

set cutom user agent in web browser control when navigating to a single page

How can I set a custom user agent for a webbrowser control? The control is loading a page where I need to spoof it. I am using c sharp.
This has been asked many times on here. I suggest searching for a solution next time before posting a new question, but you can easily do this by using the WebBrowser control's Navigate() method. Just note that this will only work when you use this method, after you navigate to another page, it will "reset".
webBrowser1.Navigate("http://yoursite.com", "_self", null, "User-Agent: Custom User Agent string");
Also, other header information can be included in the header parameter as well. More information can be found here.
Microsoft's official way to customize the User Agent is to implement the IOleControl::OnAmbientPropertyChange event to respond to DISPID_AMBIENT_USERAGENT requests (but does not affect Navigate() or a page's DOM), or use UrlMkSetSessionOption(URLMON_OPTION_USERAGENT).

Resources