Chrome 搜索页面按钮的添加以及图片的更改（萌新）

大家好，欢迎来到IT知识分享网。

在学习react中不断的练习便是最好的进步方法，今天对chrome搜索页面动了心思，好了让我们一起看看怎么去改动吧（我是新手如有不对请大佬补充）

首先呢我们要有一个完整的框架，建立一个全新的项目，在里面有一个chrome框架，才可以实行                                                                                         

1. 建立框架（https://github.com/lxieyang/chrome-extension-boilerplate-reactgithub大佬谢阳的，可以使用此框架） 2.
2. 在建立好框架后 我们可以看一下里面的东西，可以把不必要的删除，因为我换要练习其他的所以留有这么多，
3. 

我们在里面修改的时候需要先进行一个网站更改popup里的jsx文件href=”https://Google.com”,newtab的jsx同理，而因为里面绑定的是content/index.js文件所以我们写的话要写在这个里面，其他的不需要动。

4.首先我们要替换的是图片，先找到图片的元素，追踪到之后

const changeElements = document.querySelector(‘.lnXdpd  (备注：这个里面便是找到的元素，在谷歌浏览器上面找的class)‘);

changeElements.src =

  ‘https://images.pexels.com/photos//pexels-photo-.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1（备注：你想要放入的图片地址）‘;

 5.接下来要进行按钮的添加可以做一个基础的，我所做的是在 Google Search 按钮左侧增加一个按钮，叫做 “Switch Language”：

1. 第一次点击该按钮，将 “Google Search” 按钮的文字换成 “搜索”
2. 第二次点击该按钮，将“搜索” 按钮的文字换成 “Google Search”

 具体代码如下

const button = document.createElement(‘button’);（创建一个按钮）

button.innerText = ‘Switch Language’;（按钮里面的名字）

const searchElements = document.querySelectorAll(‘.gNO89b’);（找到网页中所要追踪的元素class在他的旁边添加按钮）

searchElements.forEach((element) => {

  element.insertAdjacentElement(‘afterend’, button);

});（因为里面有两个相同的class所以确保是第一个）

button.addEventListener(‘click’, function (e) {

  e.preventDefault();（为按钮添加监听事件，并且因为一点击按钮网页就刷新，所以e.preventDefault阻止（js冒泡与捕获））

  const targetElement = searchElements[1];（因为之前找到过里面的元素有两个，所以要找出里面第二个我们需要的，添加一个if,else语句来切换）

  if (targetElement.value === ‘Google Search’) {

    targetElement.value = ‘搜索’;

    console.log(‘搜索’);（确保能执行）

  } else {

    targetElement.value = ‘Google Search’;

    console.log(‘语言：中文’);（确保能执行）

  }

});

就此我们完成了按钮的添加。