Is there a way to limit a Chrome extension to only run on certain urls?
I build an extension that I won't to run only inside specific facebook app.
https://apps.facebook.com/appname/*
The extension add option to 'Right click menu' when clicking on image
How can I do that ?
manifest.json
{
"name": "profiler",
"description": "Show user profile page",
"version": "0.2",
"background": {
"scripts": ["dating.js"]
},
"manifest_version": 2,
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
Thanks in advance!
To add a menu option that shows only for images on a specific domain you can do the following:
On your manifest:
"permissions": [
"contextMenus"
],
On your background script:
chrome.contextMenus.create( {
title: 'My Menu Item',
contexts: ['image'],
documentUrlPatterns: ['https://apps.facebook.com/appname/*'],
onClick: function( info, tab ) {
...
}
});
Related
How can I create a panel section like the one that Gitlens has (see the screenshot below)? I've looked over the documentation and the Github examples presented here and I could not find anything on how to create this.
I want to have a button there next to TERMINAL and when I press on it to present a webview.
I have managed to do this by creating a viewContainer in the contributes object.
"viewsContainers": {
"panel": [
{
"id": "myPanel",
"title": "Colors",
"icon": "images/views/history.svg"
}
]
},
and then I create a view that uses the viewContainer.
"contributes": {
"views": {
"myPanel": [
{
"type": "webview",
"id": "calicoColors.colorsView",
"name": "Calico Colors"
}
]
},
I have developed a modal pop up window by using the link https://learn.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devops and provided option to open the pop up under Actions option. When pop opens it keeps on opening multiple pages continuously. Is there any solution to stop it and open only one instance of the window?
dialogService.openDialog(contributionId, dialogOptions).then(function(dialog){}
The above is the code to call the pop window.
contribution:
"contributions": [
{
"id": "registration-form",
"type": "ms.vss-web.action",
"description": "The content to be displayed in the dialog",
"targets": ["ms.vss-work-web.work-item-context-menu"],
"properties": {
"text": "ValidateDialog",
"title": "ValidateDialog",
"toolbarText": "ValidateDialog",
"uri": "registration-form.html"
}
}
],
"scopes": [
"vso.work"
],
"files": [
{
"path": "register_main.js",
"addressable": true
},
{
"path": "register-form.html",
"addressable": true
},
{
"path": "node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js",
"addressable": true
}
]
I have use following option to call the dialog:
https://learn.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devops#showing-the-dialog-advanced
created html file with registration-form.html :
https://learn.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devops#dialog-contents
I am trying to add a button to the 'editor/title' section which runs my command. With my current configuration, my command name appears when unfolding the menu by clicking the 3 buttons. What I want is to have an icon presented (like for the split editor button), which runs my command.
From the documentation I found that it should be possible to supply an svg file for the icon, but I prefer to use an icon from the product icons. This way the icon can change along with the theme.
Is that even possible, or am I just configuring it incorrectly?
This is the config I have so far:
"contributes": {
"commands": [
{
"command": "my-extension.my-command"
"title": "My Command",
"icon": "preview" // <-- this refers to the icon from 'product icons'
}
],
"menus": {
"editor/title": [
{
"when": "resourceExtname == .xyz",
"command": "my-extension.my-command"
}
]
}
}
This should works:
"contributes": {
"commands": [
{
"command": "my-extension.my-command"
"title": "My Command",
"icon": "$(preview)" // <-- the syntax for using a 'product icon' is $(iconIdentifier)
}
],
}
I'm publishing the chrome app.
I need to open up "http://kangwodnd.cafe24.com/" with fullscreen mode.
in my manifest.json
{
"manifest_version": 2,
"name": "배드민턴 코트 예약시스템",
"description": "Badminton Court Reservation System",
"version": "0.44",
"icons": {
"128": "128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
"fullscreen",
"alwaysOnTopWindows"
]
}
and
I don't know what I have to do in background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("http://kangwodnd.cafe24.com/",{
});
});
It looks like publishing normally, but when I run the app. It's not working no alert no warning.
What am I missing?
You can't open an external URL as a hosted app window.
To achieve what you want, you need to create your own local HTML file, and embed a <webview> into it to show your webapp.
I'm creating a content script Chrome extension that hides the newsfeed on the Facebook homepage.
This script loads when I first open facebook.com, but fails when navigating into Facebook and back to the main page (which is a URL that's defined in the extension correctly).
Here's my manifest.js file:
{
"name": "NewsBlock",
"description": "NewsBlock - Facebook Newsfeed Hider",
"version": "1.0.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*", "storage"
],
"browser_action": {
"default_title": "NewsBlock",
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["https://www.facebook.com/"],
"js": ["myscript.js"]
}
],
"manifest_version": 2
}
Here's my myscript.js file:
if (document.getElementById('home_stream'))
document.getElementById('home_stream').style.visibility = "hidden";
if (document.getElementById('pagelet_home_stream'))
document.getElementById('pagelet_home_stream').style.visibility = "hidden";
console.log("NewsBlock Activated...")
Any help in understanding why this isn't loaded when I navigate back to the homepage on Facebook will be amazing.
That's because on many occasions the Facebook page uses the history.pushstate method to navigate. This method can change the current url without causing a new page load. The navigation is simulated by replacing part of the page content with the result of ajax calls.
You can use the chrome.webNavigation.onHistoryStateUpdated event to detect that situation, as suggested in this answer https://stackoverflow.com/a/17584559/1507998.
Some links in facebook call ajax functions, so most of time clicking on a link in facebook doesn't change the page, just loads content via ajax. So your content script executes only once.
There are two possible solution,
You can also add a DOM change listener like DOMSubtreeModified, and run the code every time when content is changed.
You can add CSS code to page, so it doesn't need to be run every time even if page is changed via ajax.
Like this,
manifest.json
{
"name": "NewsBlock",
"description": "NewsBlock - Facebook Newsfeed Hider",
"version": "1.0.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*", "storage"
],
"browser_action": {
"default_title": "NewsBlock",
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["https://www.facebook.com/"],
"js": ["myscript.js"],
"css": ["mystyle.css"]
}
],
"manifest_version": 2
}
mystyle.css
#home_stream, #pagelet_home_stream {
visibility: hidden;
}