I cannot understand why this isn't working.
I have checked the google extension dev docs, checked some sample code.
Checked other stackoverflow Question/Answers without any positive feedback/results from testing.
This extension is very simple
It displays a popup with an input text field and a button
on clicking it will send a message to the content script via postMessage to update the document.getElementsByTagName("video")[0].playbackRate
this will adjust youtubes or other supported (future venture) Video
Playback Speed beyond or lower than the default of 0.25, 0.50, 1, 1.25, 1.50, 2 or to an exact value like 1.4390
Easier and faster than using said console + devtools, etc..which speeds up the initial setup...
please help :)
manifest.json
{
"manifest_version": 2,
"name": "Youtube Playback",
"version": "1.0",
"description": "Manage Playback Speed With Any Value",
"homepage_url": "https://github.com/DeanVanGreunen",
"permissions": [
"tabs",
"activeTab"
],
"browser_action": {
"icon": "icon.png",
"default_icon": "icon.png",
"title": "Youtube Playback",
"default_title": "Youtube Playback",
"popup": "popup.html",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
]
}
popup.html
<script>
function setPlaybackSpeed(speed){
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {action: "setPlaybackSpeed", "speed": speed});
});
}
</script>
<div>
<input id="text_playbackspeed" type="text" style="" placeholder="1" value="1"/>
<button id="btn_updateplaybackspeed" style="">Update</button>
</div>
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.action === "setPlaybackSpeed" ) {
document.getElementsByTagName("video")[0].playbackRate = request.playback_speed;
}
return true;
}
);
Here is the working solution (its being a while however here you go, I forgot to update this thread)
Overview
This extension is very simple
It displays a popup with an input text field and a button
on clicking it will send a message to the content script
via postMessage to update the document.getElementsByTagName("video")[0].playbackRate
this will adjust youtubes or other supported (future venture) Video Playback
Speed beyond or lower than the default of 0.25, 0.50, 1, 1.25, 1.50, 2 or up a max of 4 times the original speed by using 4
an exact value like 1.4390
Easier and faster than using said console + devtools, etc..which speeds up the initial setup...
Project Repo Hosted on Github at:
https://github.com/DeanVanGreunen/YT_SpeedMeUpExtension
Or get the latest release via:
https://github.com/DeanVanGreunen/YT_SpeedMeUpExtension/releases/
Or see latest updated Files below:
manifest.json
{
"manifest_version": 2,
"name": "Youtube Playback",
"version": "1.0",
"description": "Manage Playback Speed With Any Value",
"homepage_url": "https://keybase.io/DeanVanGreunen",
"repo_url": "https://github.com/DeanVanGreunen/YT_SpeedMeUpExtension",
"permissions": [
"tabs",
"activeTab"
],
"icons": {
"128": "icon.png"
},
"browser_action": {
"default_icon": {
"128": "icon.png"
},
"default_title": "Youtube Playback",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
]
}
popup.html
<style>
#text_playbackspeed {
padding: 2px;
margin-bottom: 4px;
}
#leButtons, #findsMe {
padding: 4px 8px;
text-align: center;
margin:0px auto;
}
#findsMe img{
display: block;
margin: 0 auto;
width: 69px;
height: 69px;
}
</style>
<div>
<input id="text_playbackspeed" type="text" style="" placeholder="1" value="1"/>
<div id="leButtons">
<button id="btn_updateplaybackspeed_minus" style="">-1</button>
<button id="btn_updateplaybackspeed" style="">Update</button>
<button id="btn_updateplaybackspeed_add" style="">+1</button>
</div>
</div>
<div id="findsMe">
<img src="https://avatars0.githubusercontent.com/u/22296075" alt="The Developer" />
<a target="_blank" href="https://keybase.io/DeanVanGreunen">Find me</a>
</div>
<script type="text/javascript" src="popup.js"></script>
popup.js
function setPlaybackSpeed(speed){
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {action: "setPlaybackSpeed", "speed": speed});
});
}
function getPlaybackSpeed(){
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {action: "getPlaybackSpeed"});
});
}
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(sender.tab){
if( request.action == "returnPlaybackSpeed" ) {
document.getElementById('text_playbackspeed').value = request.speed;
}
}
}
);
document.getElementById('btn_updateplaybackspeed_minus').addEventListener('click', function(event) {
var num = parseFloat(document.getElementById('text_playbackspeed').value)-1;
document.getElementById('text_playbackspeed').value = num;
});
document.getElementById('btn_updateplaybackspeed_add').addEventListener('click', function(event) {
var num = parseFloat(document.getElementById('text_playbackspeed').value)+1;
document.getElementById('text_playbackspeed').value = num;
});
document.getElementById('btn_updateplaybackspeed').addEventListener('click', function(event) {
setPlaybackSpeed(document.getElementById('text_playbackspeed').value);
});
getPlaybackSpeed();
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(!sender.tab){
if( request.action == "getPlaybackSpeed" ) {
chrome.runtime.sendMessage({action: "returnPlaybackSpeed", speed: document.getElementsByTagName("video")[0].playbackRate}, function(){});
} else if( request.action == "setPlaybackSpeed" ) {
document.getElementsByTagName("video")[0].playbackRate = request.speed;
}
}
}
);
icon.png
Related
I am a programming beginner. I would like to develop a simple Chrome extension that allows to bold for dragged content, when I click a button in popup.html. I succeeded to make bold for dragged content, when I click a default icon, but making a button in popup.html with the function required more complex way.
I think that popup.js is necessary to send a message to content.js to trigger the function boldText(). I struggled to use chrome.tabs.sendMessgge or other things to trigger the function, but I failed.
Please give me some advice.
Here is my code:
1. manifest.json
{
"manifest_version": 2,
"name": "test",
"version" : "1.0",
"description": "test",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}],
"background": {
"scripts": ["jquery-3.3.1.slim.js", "background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"tabs",
"storage",
"http://*/*",
"https://*/*"
]
}
2. background.js
chrome.browserAction.onClicked.addListener(buttonClicked);
function buttonClicked(tab) {
let msg = {
txt: "hello"
}
chrome.tabs.sendMessage(tab.id, msg);
}
3. content.js
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message, sender, sendResponse) {
if (message.txt === "hello") {
var selection = window.getSelection();
alert(selection);
boldText();
}
}
function boldText() {
document.designMode = "on"; // designMode on for execCommand
document.execCommand('Bold', false);
document.designMode = "off"; // designMode off for execCommand
return false;
}
4. popup.html
<!doctype html>
<html>
<head>
<script src="jquery-3.3.1.slim.js"></script>
<script src="popup.js"></script>
</head>
<body>
<button id="boldButton" value="bold">bold</button>
</body>
</html>
I am trying to develop a simple chrome extension in which i want to select a text from any web page and after clicking on a button it must search text in google.
I am new to extension. Right now i am able to select the text. But i can not able to google it. My code is as below.
Manifest.json
{
"name": "Selected Text",
"version": "0.1",
"description": "Selected Text",
"manifest_version": 2,
"browser_action": {
"default_title": "Selected Text",
"default_icon": "icon.PNG",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"<all_urls>"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["popup.js"]
}
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
<style>
body { width: 300px; }
textarea { width: 250px; height: 100px;}
</style>
</head>
<body>
<textarea id="text"> </textarea>
<button id="Hindi" button onclick="Hindi Meaning">Hindi Meaning</button>
</body>
</html>
popup.js
chrome.tabs.executeScript( {
code: "window.getSelection().toString();"
}, function(selection) {
console.log(selection[0]);
if(selection[0].length > 0){
document.getElementById("text").value = selection[0];
}
});
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function(response) {
var selectedText = document.getElementById("text").value = selection[0];
chrome.tabs.create({url: 'http://google.com?q=' + selectedText});
});
});
Hi i've been looking at lots of tutorials and can't find anything it might be my poor google skills but I hoped the answer was quick and simple.
The Plan
The aim is to make an extension which will append any website using javascript.
Current State
I current have the javascript append coded and basic manifesto created
document.body.innerHTML += '<div id="adBar" style="background-color: #933131; width: 150px; height: 400px; position: fixed; left: 10px; top: 25%;"></div>'
The Problem
I can't find anywhere how to create a chrome extension which would allow this script to run in the background on every page, I can only find how to make a pop-up on click.
I hope this is clear and simple. All help is appreciated!
You need to set matches to <all_urls> (also you can add a button to the extension to trigger it). Here is my full example:
Extension Buttons
My Extension
├── manifest.json
├── background.js
├── content.js
├── jquery-2.2.0.min.js
├── icon.png
manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"version": "0.1",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["jquery-2.2.0.min.js","content.js"]
}
],
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// Send a message to the active tab
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
});
});
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "clicked_browser_action" ) {
//YOUR CODE GOES HERE
}
}
);
Basically I added a button to the extension that calls the content.js once it is pressed. The listener is on background.js.
You can wrap the code in content scripts and use "all_urls" for match patterns.
manifest.json
{
"name": "Test",
"version": "1.0",
"description": "Test",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content.js"
],
"run_at": "document_end",
"all_frames": true
}
],
"manifest_version": 2
}
content.js
document.body.innerHTML += '<div id="adBar" style="background-color: #933131; width: 150px; height: 400px; position: fixed; left: 10px; top: 25%;"></div>'
Can someone please tell me why the following extension does not work? I tried to replace the inline script with script src=" ..." /script and it still doesn't work. Is it better to list both javascripts in content scripts or remove them both?
POPUP.html
<!DOCTYPE html>
<html>
<head>
<style>
body { width: 300px; }
textarea { width: 250px; height: 100px;}
</style>
<script>
function pasteSelection() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
var text = document.getElementById('text');
text.innerHTML = response.data;
});
});
}
</script>
</head>
<body>
<textarea id="text"> </textarea>
<button onclick="pasteSelection(); ">Paste Selection</button>
</body>
</html>
selection.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});
manifest.json
{
"name": "Selected Text",
"version": "0.1",
"description": "Selected Text",
"browser_action": {
"default_title": "Selected Text",
"default_icon": "online.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"chrome://favicon/",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["selection.js", "paste.js"]
"run_at": "document_start",
"all_frames": true
}
]
}
You can't use any inline code and you are using several depreciated methods. Not moving all of the inline code to an external file is probably what is causing the problem, but it is not good to use depreciated methods anyway. Fixing it would make it look like this:
Popup.html
<!DOCTYPE html>
<html>
<head>
<style>
body { width: 300px; }
textarea { width: 250px; height: 100px;}
</style>
<script src="popup.js"></script>
</head>
<body>
<textarea id="text"> </textarea>
<button id="pasteButton">Paste Selection</button>
</body>
</html>
Popup.js
window.onload = function() {
var pasteButton = document.getElementById("pasteButton");
pasteButton.onclick = function(){
chrome.tabs.query({active:true,currentWindow:true}, function(tab) {
chrome.tabs.sendMessage(tab[0].id,{method:"getSelection"},function(response){
var text = document.getElementById('text');
text.innerHTML = response.data;
});
});
};
};
selection.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});
Manifest.json
{
"name": "Selected Text",
"version": "0.1",
"description": "Selected Text",
"manifest_version": 2,
"browser_action": {
"default_title": "Selected Text",
"default_icon": "online.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"chrome://favicon/",
"http://*/*",
"https://*/*"
],
"content_scripts": [{
"matches": ["http://*/*"],
"js": ["selection.js", "paste.js"],
"run_at": "document_start",
"all_frames": true
}]
}
I would like to make a chrome extension that use a popup to do :
select text
click on the chrome extension icon
get it in the popup (textarea, ...)
This question was already asked here but Google did updates and the code I found is not working anymore ...
selection.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});
popup.html
<!DOCTYPE html>
<html>
<head>
<style>
body { width: 300px; }
textarea { width: 250px; height: 100px;}
</style>
<script>
function pasteSelection() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
var text = document.getElementById('text');
text.innerHTML = response.data;
});
});
}
function getSelectedText(){
if (window.getSelection){
var str = window.getSelection();
}else if (document.getSelection){
var str = document.getSelection();
}else {
var str = document.selection.createRange().text;
}
return str;
}
function affichage(){
var sel = getSelectedText();
alert(sel);
}
function addtext() {
document.form.champ.value = getSelectedText();
}
</script>
</head>
<body>
<form>
<textarea id="text"></textarea>
<button onclick="pasteSelection(); " type="submit">get text</button>
</form>
</body>
</html>
manifest.json
{
"name": "Selected Text",
"version": "0.1",
"description": "Selected Text",
"options_page": "page_options.html",
"browser_action": {
"default_title": "Selected Text",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"chrome://favicon/",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["selection.js"],
"run_at": "document_start",
"all_frames": true
}
],
"manifest_version": 2
}
I thank you in advance for your help :)
There are multiple problems in your script
chrome.extension.onRequest is deprecated in favor of chrome.extension.onMessage
chrome.tabs.sendRequest is deprecated in favor of chrome.tabs.sendMessage
CSP will not allow inline scripting and <script> tag in html code.
window object of Content Script is different from normal page window object.
After applying multiple changes to code i got it working
manifest.json
Eliminated not applicable sections of manifest
{
"name": "Selected Text",
"version": "0.1",
"description": "Selected Text",
"browser_action": {
"default_title": "Selected Text",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["selection.js"],
"run_at": "document_start",
"all_frames": true
}
],
"manifest_version": 2
}
popup.html
Ensured popup.html adheres to CSP
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 300px;
}
textarea {
width: 250px;
height: 100px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<textarea id="text"></textarea>
<button id="submit">get text</button>
</body>
</html>
popup.js
Script to pick current tab and send message and update DOM.
function pasteSelection() {
//Select current tab to send message
chrome.tabs.query({
"active": true,
"currentWindow": true,
"status": "complete",
"windowType": "normal"
}, function (tabs) {
//It returns array so looping over tabs result
for (tab in tabs) {
//Send Message to a tab
chrome.tabs.sendMessage(tabs[tab].id, {
method: "getSelection"
});
}
});
}
//Adding a handler when message is recieved from content scripts
chrome.extension.onMessage.addListener(function (response, sender) {
//Set text to text area
var text = document.getElementById('text');
text.value = response.data;
});
// Bind On click event to pasteSelection() function
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("submit").onclick = pasteSelection;
});
selection.js
Passes selected text to popup.html
//Add a handler to handle message sent from popup.html
chrome.extension.onMessage.addListener(function (request, sender) {
//Hanlde request based on method
if (request.method == "getSelection")
//Send selected text back to popup.html
chrome.extension.sendMessage({
data: document.getSelection().toString()
});
else chrome.extension.sendMessage({}); // snub them.
});
References
tabs.query()
tabs.sendMessage()
extension.onMessage()
extension.sendMessage()
CSP