如何将不同变量的多个不同值从popup.js发送到inject.js，以便在inject.jss脚本中使用这些值

Question

嗨，我不确定如何将集合变量从popup.js发送到inject.js。假设我在popup.js:中有这些变量

// popup.js file
var year = "New Year"
var month = "New Month"
var day = "New Day"

现在我想把每一个都发送到inject.js脚本中，我不确定该怎么做。有什么想法吗？

// inject.js file
// some how import the values over from the popup.js
console.log(year + ", " + month +  ", " + day)

如果有人对如何做到这一点有任何想法，请帮忙。我对此非常执着，而且我是编码初学者，所以很抱歉，如果这是你以前看到的问题或重复的问题，我只是在寻求帮助，谢谢。

p.S这是一个谷歌扩展，所以如果有任何想法可以兼容谷歌铬将不胜感激。

Answer 1

传统的方法是使用窗口并将变量分配给它的一些属性。如果这是一个小项目，而你只想完成它，那么这很简单。

在popup.js中，

window.myVars = {
"year": year,
"month": month,
"day": day
};

现在使用inject.js

console.log(window.myVars.year + ", " + window.myVars.month +  ", " + window.myVars.day)

问题是你正在污染全球范围。如果另一个javascript文件(可能是第三方库(使用window.myVars，您可能会遇到问题。这种方法很难调试，垃圾收集也可能受到影响。

一个非常现代的方法，但将是使用本地存储API。

localStorage.setItem("year",year); // In popup.js
localStorage.getItem("yera"); // In inject.js

如果你可以使用最新的es模块功能，那么你也可以这样做，

export const getYear = (() => year ); // In popup.js
export const getMonth = (() => month );
export const getDay = (() => day );

然后在inject.js中，

import getYear,getMonth,getDay from ./popup.js
console.log(getYear());