如何将类应用于Chrome扩展的活动标签页 [英] How to apply class to the active tab page from chrome extension
问题描述
我正在开发一个 Chrome扩展，您可以从弹出窗口中的列表中选择颜色方案，将其应用于打开（突出显示）选项卡。从一个代码片段中，我知道在 code：document.body.style.backgroundColor ='red' .chrome.com / extensions / tabs＃method-executeScriptrel =nofollow> chrome.tabs.executeScript 更改背景颜色。但是 code 中只有一行。
我的步骤是什么
- 从弹出菜单中选择颜色方案
- 获取所选
li -
- 请将该类应用于DOM文档 请参阅下面的代码 >
popup.js
document.addEventListener（'DOMContentLoaded'，function（） {
var li = document.querySelectorAll（'li'）;
for（var i = 0; i
}
}）;
function click（e）{
// console.log（e.target.className）; //给出正确的值
chrome.tabs.executeScript（null，{
code：var scriptOptions = {param1：e.target.className};}，function（e）{
console.log（'clicked class'）;
console.info（param1）; // nothing nothing
document.body.setAttribute（'class'，e.target.className）;
}）;
window.close（）;
}
- 如何获得
e.target.className函数内部（e）？
再次如果我使用jquery。它只改变了那个弹出的背景颜色，看到代码
$（function（）{
console.log 'jQuery added'）;
$（document）.on（'click'，'li'，function（）{
var cl = this.className;
$（'body'） .removeClass（）。addClass（cl）;
}）;
}）;
请告诉我
- 如何在函数（e）中获得e.target.className？
让我们看看下面的示例代码：
var a = 1;函数f（a）{alert（a）;} f（2）;
这是您问题的简化版本。在全局范围内有一个变量 a ，但是通过命名你的函数参数 a
在您的代码中：
函数点击（e）{
// e现在点击（e）
chrome.tabs.executeScript（null，{
code：var scriptOptions = {param1：e.target.className };}，function（e）{
// e现在来自函数（e）
}）;
}
解决方法很简单：您不使用回调的参数 executeScript ，所以只需使用 function（）{/ * ... * /} 作为回调。
如果我使用jQuery，它只会改变弹出背景颜色
您的代码在弹出窗口中运行; $（'body'）引用弹出框的主体。与 document.body 相同 - executeScript 的回调会在弹出窗口中执行。
要更改活动选项卡，需要从该选项卡中的内容脚本完成。
完成此操作的正确方法是什么
尽管您可以注入代码，但最好是一个等待命令的内容脚本。
// content.js
if（！inject）{//确保它只执行一次
inject = true;
chrome.runtime.onMessage.addListener（function（message，sender，sendResponse）{
if（message.action ==bodyClass）{
document.body.setAttribute（'class' ，message.class）;
}
}）;
}
然后从弹出窗口注入此脚本然后发送消息：
chrome.tabs.query（{active：true，currentWindow：true}，function（tabs）{
//只需要activeTab权限
chrome.tabs.executeScript（tabs [0] .id，{file：content.js}，function（）{
//此代码在内容脚本代码后执行
chrome.tabs.sendMessage（tabs [0] .id，{action：bodyClass，class：example}）;
执行
//所以它准备好了}）;
}）;
如果您需要jQuery，您需要先注入它：
chrome.tabs.executeScript（tabs [0] .id，{file：jquery.js}，function（）{
chrome.tabs。函数（）{
/ *内容脚本就绪* /
}
}
code> 或者，您可以在清单中定义脚本，而不是每次都注入脚本，但这可能会在注入时耗尽内存不需要的标签。
I am developing a chrome extension in which one can select a color scheme from list given in popup and apply it to the open (highlighted) tab. From one of code snippet I comes to know that using code : "document.body.style.backgroundColor='red'" in chrome.tabs.executeScript change the background color. but there is only one line in code.
What my steps are
- select the color scheme from popup
- get the class name of the selected
li - apply that class to the DOM document
Please see the code below
popup.js
document.addEventListener('DOMContentLoaded', function () {
var li = document.querySelectorAll('li');
for (var i = 0; i < li.length; i++) {
li[i].addEventListener('click', click);
}
});
function click(e) {
// console.log(e.target.className); // gives correct value
chrome.tabs.executeScript(null, {
code : "var scriptOptions = { param1: e.target.className} ;"}, function(e){
console.log('clicked class');
console.info(param1); // gives nothing
document.body.setAttribute('class', e.target.className);
});
window.close();
}
- How to get
e.target.classNameinside function(e) ?
again If I use jquery. it changed the that popup background color only, see the code
$(function(){
console.log('jQuery added');
$(document).on ('click', 'li', function(){
var cl = this.className;
$('body').removeClass().addClass(cl);
});
});
Please tell me
- What is the proper way to accomplish this in both javascript and jQuery
- How to get e.target.className inside function(e) ?
Let's look at the following sample code:
var a = 1;
function f(a) {
alert(a);
}
f(2);
This is a simplified version of your problem. There is a variable a in the global scope, but by naming your function parameter a you're essentially making a local variable of the same name.
In your code:
function click(e) {
// e is now from click(e)
chrome.tabs.executeScript(null, {
code : "var scriptOptions = { param1: e.target.className} ;"}, function(e){
// e is now from function(e)
});
}
The solution is simple: you're not using the parameter of the callback of executeScript, so just use function() { /* ... */ } as a callback.
If I use jQuery, it changes the popup background color only
Your code operates in the context of your popup; $('body') refers to popup's body. Same with document.body - the callback of executeScript executes in the popup.
To change the active tab, this needs to be done from the content script in that tab.
What is the proper way to accomplish this
While you could just inject code, it's better to make a content script that waits for a command.
// content.js
if(!injected) { // Make sure it's only executed once
injected = true;
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(message.action == "bodyClass") {
document.body.setAttribute('class', message.class);
}
});
}
Then from the popup, you inject this script then message it:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
// requires only activeTab permission
chrome.tabs.executeScript(tabs[0].id, {file: "content.js"}, function() {
// This code executes in the popup after the content script code executes
// so it is ready for the message
chrome.tabs.sendMessage(tabs[0].id, {action: "bodyClass", class: "example"});
});
});
If you need jQuery, you need to inject it first:
chrome.tabs.executeScript(tabs[0].id, {file: "jquery.js"}, function() {
chrome.tabs.executeScript(tabs[0].id, {file: "content.js"}, function() {
/* content script ready */
}
}
Alternatively, you can define the script in the manifest and not inject it every time, but this potentially drains memory as it is injected in tabs where it is not needed.
这篇关于如何将类应用于Chrome扩展的活动标签页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
