首先，为了能够在Chrome扩展中使用vanilla JS实现手风琴效果，我们需要创建一个HTML文件和一个JS文件。

在HTML文件中，我们可以使用以下格式来创建手风琴：

  

    
Header 1
    

      Content 1
    
  

  

    
Header 2
    

      Content 2
    
  

可以看出，每个手风琴项包含一个标题（accordion-header）和内容（accordion-content），并且所有的项都包含在一个名为“accordion”的div中。我们可以在CSS文件中定义样式来使手风琴呈现期望的效果，例如：

.accordion {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

.accordion-header {
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  max-height: 0;
}

.accordion-item.open .accordion-content {
  max-height: 200px;
}

在JS文件中，我们可以使用以下代码来为手风琴项添加点击事件，以实现展开和折叠：

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
  const header = item.querySelector('.accordion-header');
  
  header.addEventListener('click', () => {
    item.classList.toggle('open');
  });
});

这段代码首先获取所有的手风琴项，并且为每个项的标题添加了一个点击事件，当标题被点击时，该项将会