我正在学习如何创建Chrome扩展程序，我想知道这是否可行以及如何完成。
有一个游戏网站的论坛，这是一个令人难以置信的活跃和面对节奏，但它的软件是原始的。它只允许使用明文线程和回复。
扩展程序是否可以在帖子输入框旁边放置切换按钮，启用后，主动用bold and italic unicode counterparts替换字母？
答案 0 :(得分：3)
我不确定如何使用chrome扩展程序执行此操作，我在客户端修改方面的所有经验都是使用用户脚本。
然而，JavaScript的一部分相对简单。
我们应该首先解决这个问题，这很简单，选择你想听的节点，创建一些复选框，将它们混合在一起，你就明白了。
我并没有太深入，因为你没有提供任何关于你将要处理的HTML的信息，但这是基本的东西。
<input class="input">
var nodes = {};
nodes.input = document.querySelector('.input');
nodes.bold = (function()
{
var label = document.createElement('label');
nodes.input.parentNode.appendChild(label);
var bold = document.createElement('input');
label.appendChild(bold);
bold.type = 'checkbox';
var text = document.createTextNode('B');
label.appendChild(text);
return bold;
})();
nodes.ital = (function()
{
var label = document.createElement('label');
nodes.input.parentNode.appendChild(label);
var ital = document.createElement('input');
label.appendChild(ital);
ital.type = 'checkbox';
var text = document.createTextNode('I');
label.appendChild(text);
return ital;
})();
所以我们需要创建一个字典对象，我们将每个字母与它的对应部分配对给定的修饰符。我把它分成三个对象：Bold，Ital和BoldItal。通过这种方式，我们可以动态地确定我们将用哪个样式替换字母。
这可能是一项非常繁琐的工作，但是由于Chrome Dev Tools的元素检查器和控制台，我能够简单地完成它。
var replacements = {};
replacements.Bold = {'a':'','b':'','c':'','d':'','e':'','f':'','g':'','h':'','i':'',
'j':'','k':'','l':'','m':'','n':'','o':'','p':'','q':'','r':'',
's':'','t':'','u':'','v':'','w':'','x':'','y':'','z':'',
'A':'','B':'','C':'','D':'','E':'','F':'','G':'','H':'','I':'',
'J':'','K':'','L':'','M':'','N':'','O':'','P':'','Q':'','R':'',
'S':'','T':'','U':'','V':'','W':'','X':'','Y':'','Z':''};
replacements.Ital = {'a':'','b':'','c':'','d':'','e':'','f':'','g':'','h':'','i':'',
'j':'','k':'','l':'','m':'','n':'','o':'','p':'','q':'','r':'',
's':'','t':'','u':'','v':'','w':'','x':'','y':'','z':'',
'A':'','B':'','C':'','D':'','E':'','F':'','G':'','H':'','I':'',
'J':'','K':'','L':'','M':'','N':'','O':'','P':'','Q':'','R':'',
'S':'','T':'','U':'','V':'','W':'','X':'','Y':'','Z':''};
replacements.BoldItal = {'a':'','b':'','c':'','d':'','e':'','f':'','g':'','h':'','i':'',
'j':'','k':'','l':'','m':'','n':'','o':'','p':'','q':'','r':'',
's':'','t':'','u':'','v':'','w':'','x':'','y':'','z':'',
'A':'','B':'','C':'','D':'','E':'','F':'','G':'','H':'','I':'',
'J':'','K':'','L':'','M':'','N':'','O':'','P':'','Q':'','R':'',
'S':'','T':'','U':'','V':'','W':'','X':'','Y':'','Z':''};
这也很简单，将一个事件监听器附加到input元素。
如果e.which的值小于65或大于90，则不是字母。
如果没有选中任何修饰符节点，我们不需要做任何事情。
创建修饰符变量，然后根据选中的修饰符复选框构建它。我们必须按特定顺序执行此操作，以便在检查两者时，结果为BoldItal，就像我们在上面的字典中定义的那样。
使用e.which获取String.fromCharCode提供的字符代码中的字母。这将始终为我们提供一个大写字母，因此我们必须检查是否使用e.shiftKey按下了shift键，如果按下则为true，否则为false。
防止默认操作，以便按下的实际键不执行任何操作，然后将替换附加到输入。
nodes.input.addEventListener('keydown', function(e)
{
if (e.which < 65 || e.which > 90)
{
return;
}
if (!nodes.bold.checked && !nodes.ital.checked)
{
return;
}
var modifier = '';
if (nodes.bold.checked)
{
modifier += 'Bold';
}
if (nodes.ital.checked)
{
modifier += 'Ital';
}
var search = String.fromCharCode(e.which);
if (!e.shiftKey)
{
search = search.toLowerCase();
}
e.preventDefault();
nodes.input.value += replacements[modifier][search];
}, false);
这是演示中的整个shebang。将其改编为Chrome扩展程序或用户脚本应该非常简单。
var nodes = {};
nodes.input = document.querySelector('.input');
nodes.bold = (function()
{
var label = document.createElement('label');
nodes.input.parentNode.appendChild(label);
var bold = document.createElement('input');
label.appendChild(bold);
bold.type = 'checkbox';
var text = document.createTextNode('B');
label.appendChild(text);
return bold;
})();
nodes.ital = (function()
{
var label = document.createElement('label');
nodes.input.parentNode.appendChild(label);
var ital = document.createElement('input');
label.appendChild(ital);
ital.type = 'checkbox';
var text = document.createTextNode('I');
label.appendChild(text);
return ital;
})();
var replacements = {};
replacements.Bold = {'a':'','b':'','c':'','d':'','e':'','f':'','g':'','h':'','i':'',
'j':'','k':'','l':'','m':'','n':'','o':'','p':'','q':'','r':'',
's':'','t':'','u':'','v':'','w':'','x':'','y':'','z':'',
'A':'','B':'','C':'','D':'','E':'','F':'','G':'','H':'','I':'',
'J':'','K':'','L':'','M':'','N':'','O':'','P':'','Q':'','R':'',
'S':'','T':'','U':'','V':'','W':'','X':'','Y':'','Z':''};
replacements.Ital = {'a':'','b':'','c':'','d':'','e':'','f':'','g':'','h':'','i':'',
'j':'','k':'','l':'','m':'','n':'','o':'','p':'','q':'','r':'',
's':'','t':'','u':'','v':'','w':'','x':'','y':'','z':'',
'A':'','B':'','C':'','D':'','E':'','F':'','G':'','H':'','I':'',
'J':'','K':'','L':'','M':'','N':'','O':'','P':'','Q':'','R':'',
'S':'','T':'','U':'','V':'','W':'','X':'','Y':'','Z':''};
replacements.BoldItal = {'a':'','b':'','c':'','d':'','e':'','f':'','g':'','h':'','i':'',
'j':'','k':'','l':'','m':'','n':'','o':'','p':'','q':'','r':'',
's':'','t':'','u':'','v':'','w':'','x':'','y':'','z':'',
'A':'','B':'','C':'','D':'','E':'','F':'','G':'','H':'','I':'',
'J':'','K':'','L':'','M':'','N':'','O':'','P':'','Q':'','R':'',
'S':'','T':'','U':'','V':'','W':'','X':'','Y':'','Z':''};
nodes.input.addEventListener('keydown', function(e)
{
if (e.ctrlKey || e.which < 65 || e.which > 90)
{
return;
}
if (!nodes.bold.checked && !nodes.ital.checked)
{
return;
}
var modifier = '';
if (nodes.bold.checked)
{
modifier += 'Bold';
}
if (nodes.ital.checked)
{
modifier += 'Ital';
}
var search = String.fromCharCode(e.which);
if (!e.shiftKey)
{
search = search.toLowerCase();
}
e.preventDefault();
nodes.input.value += replacements[modifier][search];
}, false);<input class="input">